当页面的滚动位置到达顶部时,如何使#headnav
粘在顶部,然后在将其返回到原始位置时不粘粘?
附言代码中重复的“内容”是为了模拟滚动。这不是垃圾邮件
jsFiddle
<h1>I AM A HEADER</h1>
<div id="headnav"></div>
<pre><h1>
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
</h1></pre>
body {
margin:0
}
#headnav {
height: 75px;
width: 100%;
background-color: black;
}
最佳答案
这是一件非常简单的事情。
找出标题的原始位置是什么,然后将滚动处理程序附加到主体上,该处理程序将滚动位置与div的原始位置进行对照。
如果滚动位置大于原始位置,请添加position: fixed
如果滚动位置小于原始位置,请删除position: fixed
(Demo)
var headnav = document.getElementById('headnav');
var headnavPos = headnav.offsetTop;
window.onscroll = function() {
if(document.body.scrollTop > headnavPos) {
if(headnav.style.position !== 'fixed') {
headnav.style.position = 'fixed';
}
} else {
if(headnav.style.position === 'fixed') {
headnav.style.position = '';
}
}
}