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

Question

我正在研究一个引导用例。 我使用 Bootstrap 设计了一个菜单。 我希望向下滚动时隐藏菜单，向上滚动时显示菜单。 （向下滑动/向上滑动）。

我想使用 jQuery 来实现此功能。

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

可以使用 JQuery 执行此用例。 您可以使用如下调用隐藏 div：

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

要显示 div，请使用以下调用：

$('#menu').show()

当然，您需要输入逻辑来处理滚动。 像这样的东西会起作用。

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

更多信息在这里。