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

实用的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能够有所帮助。