我如何在 javascript 或 jquery 中显示和隐藏站点 header

Question

I am working on a Bootstrap use case. I have designed a menu using Bootstrap. I want the menu to be hidden when I scroll down, and the menu to be displayed if I scroll up. (slide-down / slide-up).

I want to use jQuery to for this functionality.

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {

    $('.center-menu').slideUp();

    $(bottomDiv).fadeIn();
  } else {
    $('.center-menu').slideDown();
    $(bottomDiv).fadeOut();
  }
}

Answer 1

This use case can be performed using JQuery. You can hide a div using a call like this:

 $('#menu').hide();

To show a div, use this call:

$('#menu').show()

Of course, you need to put in logic to handle the scroll. Something like this will work.

var lastScrollTop=150;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

More information here .