我如何在 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;
});

更多信息在這里。