jQuery粘性跟随滚动条滚动的导航栏源代码下载
- 作者：网页模板
- 大小：0.005MB
- 点击次数：3494
- 发布时间：2014-03-07 12:55
特效介绍
jQuery粘性跟随滚动条滚动的导航栏源代码下载，不兼容IE6。点击导航栏不同的按钮，滑动到不同的内容。滚动条滚动，导航栏会自始至终保持在浏览器可是区域的最顶端。
使用方法
第一步、在head区域引入下面的css样式:01 |
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"rel="stylesheet" type="text/css"> |
02 |
<link href="css/demo.css" rel="stylesheet" type="text/css"> |
03 |
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> |
04 |
<script type="text/javascript" src="js/jquery.smint.js"></script> |
05 |
<script type="text/javascript"> |
06 |
$(document).ready( function() { |
07 |
$('.subMenu').smint({ |
08 |
'scrollSpeed' : 1000 |
09 |
}); |
10 |
}); |
11 |
</script> |
第二步、在body区域引入下面的代码：
01 |
<div class="wrap"> |
02 |
<div class="subMenu"> |
03 |
<div class="inner"> |
04 |
<a href="#" id="sTop" class="subNavBtn">Home</a> |
05 |
<a href="#" id="s1" class="subNavBtn">Section 1</a> |
06 |
<a href="#" id="s2" class="subNavBtn">Section 2</a> |
07 |
<a href="#" id="s3" class="subNavBtn">Section 3</a> |
08 |
<a href="#" id="s4" class="subNavBtn">Section 4</a> |
09 |
<a href="#" id="s5" class="subNavBtn end">Section 5</a> |
10 |
</div> |
11 |
</div> |
12 |
<div class="section sTop"> |
13 |
<div class="inner"> |
14 |
</div> |
15 |
<br class="clear"> |
16 |
</div> |
17 |
<div class="section s1"> |
18 |
<div class="inner"> |
19 |
<h1>Section 1</h1> |
20 |
</div> |
21 |
</div> |
22 |
<div class="section s2"> |
23 |
<div class="inner"> |
24 |
<h1>Section 2</h1> |
25 |
</div> |
26 |
</div> |
27 |
<div class="section s3"> |
28 |
<div class="inner"> |
29 |
<h1>Section 3</h1> |
30 |
</div> |
31 |
</div> |
32 |
<div class="section s4"> |
33 |
<div class="inner"> |
34 |
<h1>Section 4</h1> |
35 |
</div> |
36 |
</div> |
37 |
<div class="section s5"> |
38 |
<div class="inner"> |
39 |
<h1>Section 5</h1> |
40 |
</div> |
41 |
</div> |
42 |
</div> |