|
本文给大家介绍的是一款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能够有所帮助。 | 
发表于 2018-12-25 05:31:01
