jQuery粘性跟随滚动条滚动的导航栏源代码下载
转载
jQuery粘性跟随滚动条滚动的导航栏源代码下载
特效介绍
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 |
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> |
12 | <div class="section sTop"> |
13 | <div class="inner"> |
15 | <br class="clear"> |
17 | <div class="section s1"> |
18 | <div class="inner"> |
19 | <h1>Section 1</h1> |
22 | <div class="section s2"> |
23 | <div class="inner"> |
24 | <h1>Section 2</h1> |
27 | <div class="section s3"> |
28 | <div class="inner"> |
29 | <h1>Section 3</h1> |
32 | <div class="section s4"> |
33 | <div class="inner"> |
34 | <h1>Section 4</h1> |
37 | <div class="section s5"> |
38 | <div class="inner"> |
39 | <h1>Section 5</h1> |
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
