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