javascript - 当查看器滚动时，如何使我网站的导航栏保持在顶部？

Question

我正在我的网站上工作，我希望在用户向下滚动时导航栏保持在页面顶部。主要问题是我希望标题(出现在导航栏上方)在用户滚动到页面顶部时将导航栏向下推。 HTML 看起来像这样:

//this is the header (should scroll)
<p1 id="a"><a href="index.html" id="linkNoStyle">TITLE</a></p1>
<p1 id="b">SUBTITLE</p1>

//this div is the nav bar (should stay at top)
<div id="div">
    <a href="projects.html" id="link">PROJECTS</a>
    &nbsp;
    &nbsp;
    <a href="ideas.html" id="link">IDEAS</a>
    &nbsp;
    &nbsp;
    <a href="contact.html" id="link">CONTACT</a>
</div>

//this is also part of the nav bar (should stay at top)
<hr size="5" color=black>

CSS 看起来像这样:

#a{
    font-family:Futura;
    font-size:80pt;
    color:black;
}

#b{
    font-family:Futura;
    color:grey;
}

#div{
    padding-top:3px;
    padding-left:10px;
    font-family:Futura;
    background-color:#ff6600;
    color:white;
    height:25px;
}

基本上，我希望导航栏与页面的其余部分一起向上滚动，但当它到达顶部时，它应该留在那儿。关于如何在我的代码中实现解决方案的说明将不胜感激。谢谢。

Answer 1

有一个 jQuery 插件可以为您完成。它被称为 sticky。官网在这里:http://stickyjs.com/

代码在这里:

<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
    $(document).ready(function(){
        $("#sticker").sticky({topSpacing:0});
    });
</script>

希望对你有帮助