实用的jQuery网页元素固定导航置顶插件StickUp

1.加载插件和jQuery

1. <script src="js/jquery.js">script> 
2. <script src="js/stickUp.min.js">script> 
3. <link href="stickup.css" rel="stylesheet"> 
4. <link href="css/bootstrap.min.css" rel="stylesheet"> 
5. <script src="js/bootstrap.min.js">script> 

2.HTML内容(Bootstrap布局)

1.  
2.     <div class="navbar-wrapper"> 
3.       <div class="container"> 
4.       <div class="navwrapper"> 
5.         <div class="navbar navbar-inverse navbar-static-top"> 
6.           <div class="container"> 
7.             <div class="navbar-header"> 
8.               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
9.                 <span class="icon-bar">span> 
10.                 <span class="icon-bar">span> 
11.                 <span class="icon-bar">span> 
12.               button> 
13.               <a class="navbar-brand" href="#">stickUpa> 
14.             div> 
15.             <div class="navbar-collapse collapse"> 
16.               <ul class="nav navbar-nav"> 
17.                 <li class="menuItem active"><a href="#home">Homea>li> 
18.                 <li class="menuItem"><a href="#features">Featuresa>li> 
19.                 <li class="menuItem"><a href="#updates">Updatesa>li> 
20.                 <li class="menuItem"><a href="#installation">Installationa>li> 
21.                 <li class="menuItem"><a href="#one-pager">One Pagera>li> 
22.                 <li class="menuItem"><a href="#extras">Extrasa>li> 
23.                 <li class="menuItem"><a href="#wordpress">WordPressa>li> 
24.                 <li class="menuItem"><a href="#contact">Contacta>li>     
25.               ul> 
26.             div> 
27.           div> 
28.         div>  
29.       div> 

3.函数调用

1. <script type="text/javascript"> 
2.          //initiating jQuery   
3.          jQuery(function($) { 
4.             $(document).ready( function() { 
5.                 //enabling stickUp on the '.navbar-wrapper' class 
6.                $('.navbar-wrapper').stickUp({ 
7.                                parts: { 
8.                                  0:'home', 
9.                                  1:'features', 
10.                                  2: 'news', 
11.                                  3: 'installation', 
12.                                  4: 'one-pager', 
13.                                  5: 'extras', 
14.                                  6: 'wordpress', 
15.                                  7: 'contact' 
16.                                }, 
17.                                itemClass: 'menuItem', 
18.                                itemHover: 'active' 
19.                              }); 
20.                 }); 
21.               }); 
22. script>