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

我在导航栏上实现了一个基于滚动的状态更改，当用户向下滚动一个较长的页面后，导航栏会在屏幕顶部的固定位置淡出，然后将其隐藏，并在向上滚动以查看页面顶部时再次将其放回相对位置。它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"});
    }
});

}

在go_to_top函数中，我相信

.animate（{scrollTop:0}，'slow'）不考虑导航本身的高度，导航本身当前不在
位置：相对位置（因此不在正常的DOM流/滚动高度中）

这两个问题看起来非常相似，但略有不同，可以在这里看到并测试它们

谢谢你的帮助
 我建议在语句末尾为<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);
   }
});

$（文档）。滚动（函数（）{
var scroll_dst=（$（document.scrollTop（））；
如果（滚动次数<200）{
css（{“位置”：“相对”，“宽度”：“100%”，“显示”：“块”}）；
}否则如果（（滚动dst>=200）和&（滚动dst<800））{
导航衰减（500）；
}否则，如果（（滚动显示>=800）{
css（{“位置”：“固定”，“宽度”：“100%”）；
}
});

您也可以这样做，当您单击“转到顶部”功能时，它会自动将nav.css放回其相对状态。这不是一个完美的解决方案，但总比没有nav要好。
显然，与滚动事件相关的功能可能会占用大量资源，我认为我的代码最大的问题是浏览器无法为滚动的每个像素计算我的每个if语句，特别是当你快速滚动到页面顶部时。因此我找到了一个更优雅的方法

在这个解决方案中，滚动信息存储在一个布尔值中，他使用一个setInterval来检查滚动位置。这与我以前的交互方式并不完全相同，但从环境来看，它似乎是最优雅和资源友好的选项。它实际上是非常漂亮的代码

你可以在现场看到，给定的url不起作用。谢谢，我已经解决了这个问题。你为什么不使用一个类，而不是将css属性应用到jQuery中呢？看看这把小提琴（取自堆栈中的另一个问题），我知道如何使用go_to_top（）函数，以便在单击时显示我的菜单。诀窍是使用jQuery的.animate（）complete参数，这是添加到animate方法末尾的函数。函数go_to_top（）{$（'a.naada-top'）。单击（函数（）{$（'html，body'）。动画（{scrollTop:10}，'slow'，函数（）{$（'nav.nav primary'）。fadeIn（100）谢谢你的回复。我本想尝试重新排序我的if语句，但这没有任何好处。事实上，这是更糟糕的性能，只有当我以非常慢的滚动返回到页面顶部时才能保持可见。（不确定为什么！）。此外，在“转到顶部”上将我的导航设置回其相对状态也不起作用，因为我的scrollNavReveal（）函数会覆盖它并将其保持为“显示：无；”。
$(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);
   }
});