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

【问题标题】：Hide/Show Nav on Vertical Scroll在垂直滚动上隐藏/显示导航
【发布时间】：2016-03-15 16:00:47
【问题描述】：

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

感谢您的帮助！

【问题讨论】：

给定的网址无效。
谢谢，我修好了。
你为什么不使用类而不是在 jQuery 中应用 css 属性？看看这个小提琴（取自堆栈上的另一个问题）jsfiddle.net/gxRC9/501
好吧，我想出了如何使用 go_to_top() 函数，以便在单击时显示我的菜单。诀窍是使用 jQuery 的 .animate() 完整参数，这是一个添加到 animate 方法末尾的函数。 function go_to_top() { $('a.naada-top').click(function() { $('html, body').animate({scrollTop:10}, 'slow', function(){ $(' nav.nav-primary').fadeIn(100); }); }) }

标签： javascript jquery css navigation

【解决方案1】：

我建议在语句末尾添加

以下是我的编码方式：

$(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 放回其相对状态。这不是一个完美的解决方案，但总比没有导航要好。

【讨论】：

感谢您的回复。我曾想过尝试重新排序我的 if 语句，但这并没有任何有益的影响。实际上它的性能更差，只有当我以非常慢的滚动速度返回页面顶部时才能保持可见。（不知道为什么！）。同样将我的导航设置回它在“转到顶部”上的相对状态也不起作用，因为我的 scrollNavReveal() 函数会覆盖它并保持它“显示：无；”。

【解决方案2】：

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

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

你可以看到它直播here.

【讨论】：