javascript - 向下滚动页面时保留我的导航

Question

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

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

喜欢这个 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:抱歉我的英语不好。

Answer 1

你需要颠倒逻辑。

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

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