在垂直滚动时隐藏/显示导航

Question

我已经在我的导航栏上实现了基于滚动的状态更改，当用户向下滚动一个冗长的页面后，它会淡入屏幕顶部的固定位置导航，然后隐藏它并将其放回相对位置，当他们向上滚动以查看页面顶部时，它会再次回到它的相对位置。它在 90% 的时间内都很好用。 这是我的代码..

function scrollNavReveal() {
var nav = $('nav.nav-primary');
$(window).scroll(function(){
    var scrollpos = $(this).scrollTop();
    if ((scrollpos > 200) && (scrollpos < 800)) {
      nav.fadeOut(500);
    }
    else if (scrollpos > 800) {
          nav.css({"position": "fixed", "width": "100%"}).fadeIn(500);
    }
    else {
      nav.css({"position": "relative", "width": "100%", "display": "block"});
    }
});

}

问题是，当我用鼠标非常快速地滚动到页面顶部时，有时导航不会出现。 我必须在鼠标上做一个小滚动，然后它弹回原位。 当我使用滚动到顶部功能时也会发生这种情况，该功能是在用户单击页脚中的"转到顶部"按钮时启动的。

function go_to_top() {
    $('a.naada-top').click(function() {
    $('html, body').animate({scrollTop:0}, 'slow');
})

}

在go_to_top函数中，我相信.animate({scrollTop:0}, 'slow');没有考虑导航本身的高度，该高度目前不在position: relative;（因此不在正常的 DOM 流/滚动高度中）。

这两个问题看起来非常相似，但略有不同，可以在这里看到和测试它们 naada.staging.wpengine.com

感谢您的帮助！

Answer 1

我建议为 <200 添加一个 if 语句，而不是在语句末尾添加一个 else 语句。如果您不必滚动浏览每个if语句并证明它们是假的，则处理速度会更快，这可能会更好地捕获更快的滚动。我也使用（document）.scroll（function（）{而不是window...但它应该以任何一种方式工作。

以下是我对此进行编码的方式：

$(document).scroll(function() {
   var scroll_dst = ($(document).scrollTop());                          
   if (scroll_dst < 200){   
       nav.css({"position": "relative", "width": "100%", "display": "block"});
   }else if((scroll_dst >= 200) && (scroll_dst < 800)) {
       nav.fadeOut(500);
   }else if((scroll_dst >= 800){
       nav.css({"position": "fixed", "width": "100%"}).fadeIn(500);
   }
});

您也可以这样做，当您单击"转到顶部"功能时，它会自动将导航.css放回其相对状态。这不是一个完美的解决方案，但总比没有导航要好。

Answer 2

显然，附加到滚动事件的函数可能非常耗费资源，我认为我的代码的最大问题是浏览器无法为每个滚动的像素评估我的每个 if 语句，尤其是当您快速滚动到页面顶部时。所以我找到了一个更优雅的解决方案。

在此解决方案中，滚动信息存储在布尔值中，他使用 setInterval 来检查滚动位置。 它与我以前的交互性不完全相同，但根据情况，它似乎是最优雅和资源友好的选择。它实际上是非常漂亮的代码。

你可以在这里看到它。