jQuery插件StickUp实现网页导航置顶
更新时间:2015年04月12日 09:38:17 投稿:hebedich
本文给大家介绍的是一款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>
以上所述就是本文的全部内容了,希望对大家熟练使用jQuery能够有所帮助。
相关文章
文本溢出插件jquery.dotdotdot.js使用方法详解
这篇文章主要介绍了文本溢出插件jquery.dotdotdot.js使用方法详解,需要的朋友可以参考下2017-06-06jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
这篇文章主要介绍了jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween 的相关资料,需要的朋友可以参考下2015-12-12
最新评论