javascript - 在垂直滚动条上隐藏/显示导航

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);
   }
});

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