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以防止任何类优先级问题。

向下滚动页面时保持导航

1 个答案: