jQuery粘性跟随滚动条滚动的导航栏源代码下载
- 作者：网页模板
- 大小：0.005MB
- 点击次数：
- 发布时间：2014-03-07 12:55
特效介绍
jQuery粘性跟随滚动条滚动的导航栏源代码下载，不兼容IE6。点击导航栏不同的按钮，滑动到不同的内容。滚动条滚动，导航栏会自始至终保持在浏览器可是区域的最顶端。
使用方法
第一步、在head区域引入下面的css样式:<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="css/demo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.smint.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
参数'scrollSpeed' : 1000 设置滚动时间，单位毫秒第二步、在body区域引入下面的代码：
<div class="wrap">
<div class="subMenu">
<div class="inner">
<a href="#" id="sTop" class="subNavBtn">Home</a>
<a href="#" id="s1" class="subNavBtn">Section 1</a>
<a href="#" id="s2" class="subNavBtn">Section 2</a>
<a href="#" id="s3" class="subNavBtn">Section 3</a>
<a href="#" id="s4" class="subNavBtn">Section 4</a>
<a href="#" id="s5" class="subNavBtn end">Section 5</a>
</div>
</div>
<div class="section sTop">
<div class="inner">
</div>
<br class="clear">
</div>
<div class="section s1">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>
<div class="section s2">
<div class="inner">
<h1>Section 2</h1>
</div>
</div>
<div class="section s3">
<div class="inner">
<h1>Section 3</h1>
</div>
</div>
<div class="section s4">
<div class="inner">
<h1>Section 4</h1>
</div>
</div>
<div class="section s5">
<div class="inner">
<h1>Section 5</h1>
</div>
</div>
</div>
- 本文标签：
- jQuery导航栏源代码,jQuery粘性导航栏
