特效描述:利用jQuery实现 粘性滚动 导航栏。利用jQuery实现粘性滚动导航栏
代码结构
1. 引入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"> <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">
2. 引入JS
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script>
3. HTML代码
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no"> <script type="text/javascript"> $(document).ready( function() { $('.subMenu').smint({ 'scrollSpeed' : 1000 }); }); </script> </head> <body onLoad="setTimeout(function() { window.scrollTo(0, 1) }, 100);"> <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> <div style="text-align:center;clear:both"><br> </div> </body> </html>