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

【问题标题】：Hide Menu on scroll down (but only after 50px)向下滚动时隐藏菜单（但仅在 50px 之后）
【发布时间】：2017-03-28 15:51:15
【问题描述】：

这个脚本使得当您在浏览器中向下滚动时，导航栏会消失/隐藏在标题后面。我想知道是否有可能在您向下滚动时立即隐藏它，在用户向下滚动一定数量的像素（例如 50 像素）后隐藏它，以避免在最轻微的滚动时隐藏敏感的导航。

提前感谢您的任何指导。

//导航滚动测试

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

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

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

【问题讨论】：

有人可以帮忙吗？

标签： javascript jquery user-experience

【解决方案1】：

你可以把它放在你的“window.on('scroll')”函数中：

if(scrollTop > 50) {

  nav.addClass('hidden');

} else {

  nav.removeClass('hidden');

}

【讨论】：

【解决方案2】：

2019 年更新/调整

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

对于初学者，当用户滚动经过某个点（在本例中为 50 像素）时，我的 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;
  }

【讨论】：