向下滚动页面时保持我的导航答案

【问题标题】：Keeping my nav when you scroll down the page向下滚动页面时保持我的导航
【发布时间】：2014-08-01 22:28:54
【问题描述】：

我正在尝试为我的公司设计一个网站，但我想不出一件事。

我希望在人们向下滚动页面时修复导航栏

喜欢这个 http://www.quintessentially.com（如您所见，当您向下滚动页面时，导航栏会固定）

我正在使用 jQuery 1.8.3.min.js 还有这段代码

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.nav').addClass('absolute');
     }
     else {
         $('.nav').removeClass('fixed');
     }
});

而css就是这样的

header .nav{
top: 55px;
padding: 0;
min-height: 0;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 3px;
width: 100%;
position: absolute;
z-index: 999;
}

.fixed{
position: fixed;
top: 0;  }

但我不知道为什么它不起作用。有人知道如何解决吗？

谢谢！！ :D

ps：抱歉我的英语不好。

【问题讨论】：

请同时添加一些相关的 HTML 以便我们进行测试。
我没有看到“absolute”的 CSS 类，这是您在用户从顶部滚动超过 50 像素时添加的类。此外，当用户滚动到顶部时，您只会删除“固定”类，但您永远不会将其重新添加。

标签： javascript jquery css

【解决方案1】：

你需要颠倒逻辑。

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.nav').
          .removeClass('absolute')
          .addClass('fixed');
     }
     else {
         $('.nav')
          .removeClass('fixed')
          .addclass('absolute');
     }
});

还添加了一个 removeClass 以防止任何类优先级问题。

【讨论】：

请记住，在每个滚动事件上运行此 eval 将成为性能杀手。您可以使用条件逻辑来解决这个问题，然后使用 unbind，也许。