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

我建议为＆lt;添加if语句200而不是声明末尾的其他。如果你不必遍历每个if语句并证明它们是假的，那么处理速度会更快，这可能会更快地捕获更快的滚动。我也使用（文档）.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语句，特别是当你快速滚动到页面顶部。所以我找到了一个更优雅的solution。

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

你可以看到它here.

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

2 个答案: