特效描述：利用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>
