Question

此脚本可以在浏览器中向下滚动时导航栏消失/隐藏在标题后面。我想知道是否有可能，如果相反它只是在你向下滚动时隐藏它，在用户向下滚动一定数量的像素（比如50px）后隐藏它，以避免轻触导航隐藏在最轻微的滚动上。

提前感谢任何方向。

//导航滚动测试

var prev = 0;
var $window = $(window);
var nav = $('#belowhead');

$window.on('scroll', function(){

  var scrollTop = $window.scrollTop();
  nav.toggleClass('hidden', scrollTop > prev);
  prev = scrollTop;
});

Answer 1

你可以把它放在你的＆＃34; window.on（＆＃39; scroll＆＃39;）＆＃34;功能：

if(scrollTop > 50) {

  nav.addClass('hidden');

} else {

  nav.removeClass('hidden');

}

Answer 2

2019更新/调整

以下内容可能对希望开发可在向下滚动时消失的标头的其他人有用。我刚刚为正在创建的网站完成了以下操作，该操作要求顶部标题在用户开始滚动时消失，但在用户开始向上滚动时重新出现；如果您要不断在网站上上下滚动，请不断应用此逻辑。

对于初学者来说，当用户滚动到某个点（在这种情况下为50px）时，将一个类添加到我的header标记中，称为nav-scrolled。然后可以设置新类的样式，以更改background-color，添加box-shadow等...

$(function() {
    var header = $(".nav-container");

    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 50) {
            header.addClass("nav-scrolled");
        } else {
            header.removeClass("nav-scrolled");
        }
    })
});

但是，这只能解决以下问题：如果用户从页面顶部滚动而不是网站上的任何位置，则无法编辑标题样式。

  var userScroll;
  var scrollTop = 0;
  var delta = 5;
  var navHeight = $('header').outerHeight();

  $(window).scroll(function(event){
      userScroll = true;
  });

  setInterval(function() {
      if (userScroll) {
          hasScrolled();
          userScroll = false;
      }
  }, 250);

对我来说，下一步是依次添加和删除样式为显示和隐藏导航菜单的类show-nav和hide-nav。以下内容检查用户是否已滚动（向上或向下）到高于我的delta变量的值。如果用户开始在网站上向上滚动，则添加类show-nav，并且标题从页面顶部过渡到。如果用户向下滚动页面，则添加类hide-nav，并且标题被隐藏。

function hasScrolled() {
      var st = $(this).scrollTop();
      // Ensures a higher scroll than $delta
      if(Math.abs(scrollTop - st) <= delta)
          return;
      // If they scrolled down and are past the navbar, add class .nav-up.
      // This is necessary so you never see what is "behind" the navbar.
      if (st > scrollTop && st > navHeight){
          // Scroll Down
          $('header').removeClass('show-nav').addClass('hide-nav');
          $('.nav-toggle').removeClass('open');
          $('.menu-left').removeClass('collapse');
      } else {
          // Scroll Up
          if(st + $(window).height() < $(document).height()) {
              $('header').removeClass('hide-nav').addClass('show-nav');
          }
      }
      scrollTop = st;
  }

向下滚动隐藏菜单（但仅在50px之后）

2 个答案: