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() {
          $('.navbar-wrapper').stickUp({
                        parts: {
                          0:'home',  //这部分就是你锚链接的id
                          1:'yw',
                          2: 'sx',
                          3: 'wl',
                          4: 'hx',
                          5: 'sw',
                          6: 'zz',
                          7: 'dl',
                          8: 'yy',
                          9: 'more'
                          
                        },
                        itemClass: 'menuItem',
                        itemHover: 'active',
                        topMargin: 'auto'
                      });
        });
      });
    </script>

这样就大功告成了!效果如图:

至此我们导航随滚动监听并保持悬浮顶部算是实现了

以下附上我的test源代码供大家参考:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

        <title>导航固定顶部</title>
    
        <link rel="stylesheet" href="css/bootstrap.min.css" />
            <link rel="stylesheet" href="stickup.css" />
    </head>
    <body>    
         <div class="carousel">
    <!--这里是导航-->
    <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导航-->
    <div id="contents" style="margin-left: 130px;margin-right: 130px;">
        <div id="home" class="row featurette container marketing">
             <div class="row">
            <h1 style="margin-top: 100px;">我是home</h1>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
        </div>
             </div>
        <div id="yw" class="row featurette">
            <h1 style="margin-top: 100px;">我是语文</h1>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
        </div>
        <div id="sx" class="row featurette"> 
            <h1 style="margin-top: 100px;">我是数学</h1>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
        </div>
        <div id="wl" class="row featurette">
            <h1 style="margin-top: 100px;">我是物理</h1>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
        </div>
        <div id="hx" class="row featurette">
            <h1 style="margin-top: 100px;">我是化学</h1>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
        </div>
        <div id="sw" class="row featurette">
            <h1 style="margin-top: 100px;">我是生物</h1>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
        </div>
        <div id="zz" class="row featurette">
            <h1 style="margin-top: 100px;">我是政治</h1>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
        </div>
        <div id="dl" class="row featurette">
            <h1 style="margin-top: 100px;">我是dl</h1>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
        </div>
        <div id="yy" class="row featurette">
            <h1 style="margin-top: 100px;">我是英语</h1>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
        </div>
        <div id="more" class="row featurette">
            <h1 style="margin-top: 100px;">我是更多</h1>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
            <p>
                XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走
                符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农
                业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础
                设施互联互通。双方还要扩大人文合作，促进青年交流。
            </p>
        </div>
    </div>
    </div>
    
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    <script type="text/javascript" src="js/stickUp.min.js" ></script>
    <script type="text/javascript">
             jQuery(function($) {
        $(document).ready( function() {
          $('.navbar-wrapper').stickUp({
                        parts: {
                          0:'home',
                          1:'yw',
                          2: 'sx',
                          3: 'wl',
                          4: 'hx',
                          5: 'sw',
                          6: 'zz',
                          7: 'dl',
                          8: 'yy',
                          9: 'more'
                          
                        },
                        itemClass: 'menuItem',
                        itemHover: 'active',
                        topMargin: 'auto'
                      });
        });
      });
    </script>
    </body>
</html>
View Code

 

posted @ 2014-05-19 16:14  石奈子0314  阅读(6340)  评论(1)  编辑  收藏  举报