jQuery导航跟随simpleNavFollowing特效代码

jQuery导航跟随simpleNavFollowing特效代码

这是一款利用jQuery制作的标题导航自动跟随内容,锚点滚动定位特效代码,制作新闻类网站特别适合。

使用方法
在页面引入以下JS文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
$(function () {
    var nav = $("#nav");
    var mainPage = $(".mainPage");
    var mainTopArr = new Array();
    for(var i=0;i<mainPage.length;i++){
        var top = mainPage.eq(i).offset().top;
        mainTopArr.push(top);
    }
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        var k;
        for(var i=0;i<mainTopArr.length;i++){
            if(scrollTop>=mainTopArr[i]){
                k=i;
            }
        }
nav.find("a").eq(k).addClass("active").siblings().removeClass("active");
    });
    nav.find("a[href^='#']").click(function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop: $(this.hash).offset().top}, 400);
    });
});
</script>

Html结构
在页面引入以下CSS.css样式文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="nav">
    <a href="#page1" class="active">新闻</a>
    <a href="#page2">资讯</a>
    <a href="#page3">团队</a>
    <a href="#page4">网站</a>
    <a href="#page5">特效</a>
    <a href="#page6">文件</a>
    <a href="#page7">模板</a>
    <a href="#page8">交流</a>
    <a href="#page9">图片</a>
    <a href="#page10">百家号</a>
</div>
<div id="main">
    <div class="mainPage" id="page1">新闻</div>
    <div class="mainPage" id="page2">资讯</div>
    <div class="mainPage" id="page3">团队</div>
    <div class="mainPage" id="page4">网站</div>
    <div class="mainPage" id="page5">特效</div>
    <div class="mainPage" id="page6">文件</div>
    <div class="mainPage" id="page7">模板</div>
    <div class="mainPage" id="page8">交流</div>
    <div class="mainPage" id="page9">图片</div>
    <div class="mainPage" id="page10">百家号</div>
</div>

文件信息:

    2

    发表评论