Bootstrap导航悬浮顶部,stickUp

stickUp

一个 jQuery 插件

这是一个简单的jQuery插件，它能让页面目标元素 “固定” 在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作，也能在单页面上面实现导航功能。滚动当前页面看看导航条的效果吧。

首先我们去下载我们需要的js和css文件 https://github.com/LiranCohen/stickUp

经研究必要的js和css为

bootstrap.min.css

stickup.css

jquery.js

bootstrap.min.js

stickUp.min.js

请注意笔者引入的顺序哦.千万别弄错了.

写这个关键部分是导航部分:

关键代码如下(官方的样式):

<!--这里是导航-->
    <div class="navbar-wrapper">
        <div class="container">
            <div class="navbarwrapper" >
                <div class="navbar navbar-inverse navbar-static-top">
                    <div class="container">
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav">
                                <li class="menuItem active">
                                    <a href="#home">首页</a>
                                </li>
                                <li><li class="menuItem">
                                    <a href="#yw">语文</a>
                                </li>
                                <li class="menuItem">
                                    <a href="#sx">数学</a>
                                </li>
                                <li class="menuItem">
                                    <a href="#wl">物理</a>
                                </li>
                                <li class="menuItem">
                                    <a href="#hx">化学</a>
                                </li>
                                <li class="menuItem">
                                    <a href="#sw">生物</a>
                                </li>
                                <li class="menuItem">
                                    <a href="#zz">政治</a>
                                </li>
                                <li class="menuItem">
                                    <a href="#dl">地理</a>
                                </li>
                                <li class="menuItem">
                                    <a href="#yy">英语</a>
                                </li>
                                <li class="menuItem">
                                    <a href="#more">更多</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end导航-->

View Code

效果如图:

实际效果比这张效果图要好,已上传不知道怎么就变样了.

特别要注意的是锚链接的文本一定要和导航部分的一致.

下面是最关键的部分了,就是实现导航悬浮顶部:需添加下面代码:

//记住是在引入js文件的后面写
<script type="text/javascript">
             jQuery(function($) {
        $(document).ready( function() {
          $('.