Bootstrap导航悬浮顶部,stickUp

小鱼儿 2022-08-23 14:43 296阅读 0赞

# 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

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

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

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<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>

效果如图:

![191602349819624.gif][]

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

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

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

//记住是在引入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>

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

![191612182622788.gif][]

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

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!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>
        
        <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>

[ContractedBlock.gif]: http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220823/6826b41283b34331b034e254934b08be.png
[191602349819624.gif]: /images/20220823/7b49da6cd254408880d777b34b942542.png
[191612182622788.gif]: /images/20220823/3f0f055a1bcf4f6a9fa5ce16efb7bbfa.png