当页面的滚动位置到达顶部时,如何使#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 = '';
        }
    }
}

07-24 09:38
查看更多