jQuery插件StickUp实现网页导航置顶

2019-11-20 12:43:15

字体：大中小

来源：转载

供稿：网友

实用的jQuery网页元素固定导航置顶插件StickUp，简单的jQuery插件，实现网页元素固定，如导航固定让其总是保持在视图中可见，在one-page页面中就可以看出效果，大家可以研究研究。

使用方法：

1.加载插件和jQuery

<script src="js/jquery.js">script> <script src="js/stickUp.min.js">script> <link href="stickup.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js">script>

2.HTML内容(Bootstrap布局)

   <div class="navbar-wrapper">    <div class="container">    <div class="navwrapper">     <div class="navbar navbar-inverse navbar-static-top">      <div class="container">       <div class="navbar-header">        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>        </button>        <a class="navbar-brand" href="#"><stickUpa>       </div>       <div class="navbar-collapse collapse">        <ul class="nav navbar-nav">         <li class="menuItem active"><a href="#home">Homea</li>         <li class="menuItem"><a href="#features">Featuresa</li>         <li class="menuItem"><a href="#updates">Updatesa</li>         <li class="menuItem"><a href="#installation">Installationa</li>         <li class="menuItem"><a href="#one-pager">One Pagera</li>         <li class="menuItem"><a href="#extras">Extrasa</li>         <li class="menuItem"><a href="#wordpress">Wordpressa</li>         <li class="menuItem"><a href="#contact">Contacta</li>          </ul>       </div>      </div>     </div>    </div>

3.函数调用

<script type="text/javascript">      //initiating jQuery       jQuery(function($) {       $(document).ready( function() {         //enabling stickUp on the '.navbar-wrapper' class         $('.navbar-wrapper').stickUp({                 parts: {                  0:'home',                  1:'features',                  2: 'news',                  3: 'installation',                  4: 'one-pager',                  5: 'extras',                  6: 'wordpress',                  7: 'contact'                 },                 itemClass: 'menuItem',                 itemHover: 'active'                });         });        }); <script>

查看DEMO 立即下载

以上所述就是本文的全部内容了，希望对大家熟练使用jQuery能够有所帮助。

上一篇：jQuery插件PageSlide实现左右侧栏导航菜单

下一篇：JavaScript 面向对象与原型