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

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语句并证明它们为false，则处理速度将更快，这可能会使滚动更快更好。 我也使用（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放回其相对状态。 这不是一个完美的解决方案，但是比根本没有导航更好。

Answer 2

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

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

您可以在此处看到它。