jquery - 带有 jQ​​uery 的粘性导航栏

Question

我正在尝试为我的网页添加一个粘性导航栏，但我遇到了一些问题。也许有人可以帮助我？

The idea of ‘sticky position’ is to make elements on a website stick and remain visible. Those elements will initially be in their position, and then in the event of scrolling down the webpage, their position will be following the scroll.

Here's a link to what I have which also shows the navigation bar.

和here's a link to the tutorial I tried to follow

这是一些相关的 CSS:

/* Navigation bar */
#navi {
height: 40px;
width: 961px;
background: #1e416f;
font-size: 14px;
color: white;
text-transform: uppercase;
margin: 0 0 20px 0;
}

这是一些相关的 HTML:

<!-- NAVIGATION -->
 <div id="navi">
 <h1 class="logo"><a href="#">CAUL/CBUA</a></h1>

<ul id="primary-nav">
    <li><a href="#">Directories</a></li>
    <li><a href="#">Committees</a></li>
    <li><a href="#">Resources</a></li>
    <li><a href="#">About</a></li>
</ul>

<ul id="tools-nav">
    <li class="login"><a href="#">Log In</a></li>
    <li class="email icon"><a href="#">Email</a></li>
    <li class="twitter icon"><a href="#">Twitter</a></li>
    <li class="search icon"><a href="#">Search</a></li>
</ul>
</div>

我不会费心发布我做过的内容，因为教程根本没有太多内容。与您在该教程中看到的相比，我唯一改变的是它所说的nav 我将其更改为navi 因为这就是我所拥有的在我的 CSS 中。

或者如果有人有任何其他类似的想法，我愿意接受。

Answer 1

jQuery Waypoints非常有用。

一旦到达页面顶部，您就可以拥有一个导航栏。

$('#navi').waypoint('sticky');

在你的 CSS 中

#navi .stuck { position:fixed; }

应该可以解决问题!