• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 导航菜单 >  jQuery粘性跟随滚动条正文

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

作者:网页模板
大小:0.005MB
点击次数:
发布时间:2014-03-07 12:55
分享到:

特效介绍

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>

  • 本文标签:
  • jQuery导航栏源代码,jQuery粘性导航栏
凸出和折纸效果的导航菜单css3导航代码
包含图片列表和表单的jQuery下拉导航菜单