jQuery粘性跟随滚动条滚动的导航栏源代码下载
- 作者：网页模板
- 大小：0.005MB
- 点击次数：3494
- 发布时间：2014-03-07 12:55
-
分享到：0
特效介绍
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>
|
参数'scrollSpeed' : 1000 设置滚动时间，单位毫秒
第二步、在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>
|