特效介绍
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>