首页 > 特效插件 > 导航菜单 >  jQuery粘性跟随滚动条滚动的导航栏源代码下载正文

jQuery粘性跟随滚动条滚动的导航栏源代码下载

特效介绍
jQuery粘性跟随滚动条滚动的导航栏源代码下载
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>