实用的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> <div> <div> <div> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> <a href="#"><stickUpa> </div> <div> <ul> <li><a href="#home">Homea</li> <li><a href="#features">Featuresa</li> <li><a href="#updates">Updatesa</li> <li><a href="#installation">Installationa</li> <li><a href="#one-pager">One Pagera</li> <li><a href="#extras">Extrasa</li> <li><a href="#wordpress">Wordpressa</li> <li><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插件StickUp实现网页导航置顶】相关文章：
★ jquery插件splitScren实现页面分屏切换模板特效
★ jQuery插件pagewalkthrough实现引导页效果