当浏览器滚动时，如何使我的网站的导航栏保持在顶部？ [英] How do I make the navigation bar of my site stay at the top when the viewer scrolls?

问题描述

我在我的网站上工作，当用户向下滚动时，我想让导航栏留在页面顶部。主要的问题是，我想要标题（出现在导航栏上方），当用户滚动到页面的顶部时，向下推动导航栏。 HTML如下所示：

I am working on my website, and I want to have the the navigation bar stay at the top of the page when the user scrolls down. The main problem is that I want the header (appears above the navigation bar) to push the navigation bar down when the user scrolls to the top of the page. The HTML looks like this:

//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看起来像这样：

the CSS looks like this:

#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;
}

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

Basically, I want the navigation bar to scroll up with the rest of the page, but when it reaches the top, it should stay there. Instructions on how to implement a solution into my code would be appreciated. Thanks.

推荐答案

有一个jQuery插件为你。它被称为 sticky 。官方网站： http://stickyjs.com/

There is a jQuery plugin that does it for you. It's called sticky. The official website here : http://stickyjs.com/

这里的代码：

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

希望这有助于

这篇关于当浏览器滚动时，如何使我的网站的导航栏保持在顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！