我正在尝试让导航更改为黑色标题正下方的 position: fixed
。我很确定 JavaScript 需要进行一些调整,但我不确定此时该做什么。
这是 fiddle :http://jsfiddle.net/kgnkxemd/2/
HTML
<div>
<header></header>
<div></div>
<div></div>
<ul id="site-navigation">
<li>nav 1</li>
<li>nav 2</li>
<li>nav 3</li>
<li>nav 4</li>
</ul>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
div {
height: 100px
}
header {
background: #000;
height: 60px;
position: fixed;
top: 0;
width: 100%;
}
#site-navigation {
background: yellow;
}
#site-navigation li {
display: inline-block;
}
#site-navigation.fix-nav {
position: fixed;
top: 60px;
width: 100%;
}
JS
// Fixed nav
var nav = $("#site-navigation");
nav.on("scroll", function(e) {
if (this.scrollTop > 60) {
nav.addClass("fix-nav");
} else {
nav.removeClass("fix-nav");
}
});
最佳答案
你很接近,但有几个问题。
首先,您不想将滚动事件绑定(bind)到导航,因为导航不滚动;窗口是。所以需要给窗口绑定(bind)滚动事件。然后您需要使用 $(window).scrollTop()
(或 $(this).scrollTop()
inside the scroll event)检查窗口的滚动位置
$(window).on("scroll", function(e) {
if ( $(this).scrollTop() > 60 ) {
nav.addClass("fix-nav");
} else {
nav.removeClass("fix-nav");
}
});
进行这些更改会导致:http://jsfiddle.net/kgnkxemd/3/
关于javascript - 滚动 X 量时将导航更改为 `position: fixed`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27264500/