jQuery插件StickUp实现网页导航置顶
实用的jQuery网页元素固定导航置顶插件StickUp，简单的jQuery插件，实现网页元素固定，如导航固定让其总是保持在视图中可见，在one-page页面中就可以看出效果，大家可以研究研究。
使用方法：
1.加载插件和jQuery
<scriptsrc="js/jquery.js">script> <scriptsrc="js/stickUp.min.js">script> <linkhref="stickup.css"rel="stylesheet"> <linkhref="css/bootstrap.min.css"rel="stylesheet"> <scriptsrc="js/bootstrap.min.js">script>
2.HTML内容(Bootstrap布局)
<divclass="navbar-wrapper"> <divclass="container"> <divclass="navwrapper"> <divclass="navbarnavbar-inversenavbar-static-top"> <divclass="container"> <divclass="navbar-header"> <buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <aclass="navbar-brand"href="#"><stickUpa> </div> <divclass="navbar-collapsecollapse"> <ulclass="navnavbar-nav"> <liclass="menuItemactive"><ahref="#home">Homea</li> <liclass="menuItem"><ahref="#features">Featuresa</li> <liclass="menuItem"><ahref="#updates">Updatesa</li> <liclass="menuItem"><ahref="#installation">Installationa</li> <liclass="menuItem"><ahref="#one-pager">OnePagera</li> <liclass="menuItem"><ahref="#extras">Extrasa</li> <liclass="menuItem"><ahref="#wordpress">Wordpressa</li> <liclass="menuItem"><ahref="#contact">Contacta</li> </ul> </div> </div> </div> </div>
3.函数调用
<scripttype="text/javascript">
//initiatingjQuery
jQuery(function($){
$(document).ready(function(){
//enablingstickUponthe'.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能够有所帮助。