页面定位导航 - Githubissues

lcgyh commented 5 years ago

注意事项：复制完代码后在项目开始banner上面加上id="j_subject"，在每一个需要跳转的内容模块加上class="cont-box"类

lcgyh commented 5 years ago

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
    <link rel="stylesheet" href="styles/lianxi.css">
    <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
    <script src="scripts/lianxi.js"></script>
    <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
    <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
    <style type='text/css'>
        .j_nav{position: absolute;left: 50%;top:50%;margin-left: 800px;margin-top: 10px;}
        .j_nav li{width:130px;height: 40px;line-height: 40px;text-align: center;cursor:pointer;color: #fff;font-size: 18px;background: #DE4F68;margin-top: 10px;}
        .j_nav li:hover{background: #ff1975;}
        .j_nav .on{background: #ff1975;}
        .nav-on {position: fixed;right: 20px;top:11%;}
    </style>
</head>
<body>
    <div class="j_nav" id="j_nav">
        <ul>
            <li class="nav-list">第一部分按钮</li>
            <li class="nav-list">第二部分按钮</li>
            <li class="nav-list">第三部分按钮</li>
            <li class="nav-list">第四部分按钮</li>
            <li class="nav-list">第五部分按钮</li>
            <li class="back">TOP</li>
        </ul>
    </div>
</body>

</html>

lcgyh commented 5 years ago

js 代码

$(function(){
    var subject =$('#j_subject');
    var navigation = $('#j_nav');           //导航
    var nav = subject.find('.nav-list');    //所有按钮
    var conBox = subject.find('.cont-box');   //模块
    var navTop = navigation.offset().top;  //导航相对于浏览器视口到高度

    // 点击导航跳转
    nav.on('click',function(){
        var t = $(this);
        var ts = t.siblings('li');
        t.addClass('on');
        ts.removeClass('on');
        var tindex = t.index();
        var section = conBox.eq(tindex);
        var stop = section.offset().top;
        $('body,html').animate({scrollTop:stop},800);
    });
    // 返回顶部
    $('.back').on('click',function(){
        $('body,html').animate({scrollTop:0},800);
    });

    //导航一开始设置绝对定位，随着滑动变成固定定位
    $(window).scroll(function () {
        var w = $(window).scrollTop();   //滚动条的垂直偏移
        if (_util.check.isIE6) {
                navigation.css({ 'top': 'w', 'position': 'absolute' });//fixed兼容IE6
            };
            if (w >= 300) {
                    navigation.addClass('nav-on');
                } else {
                    navigation.removeClass('nav-on');
                }

     // 随着页面滑动导航条加on
        $('.cont-box').each(function(a,b) {     //each方法，数组中的每个元素都会顺序执行function函数，a为执行元素的索引你，b为正在执行的元素
            var ctop = $(this).offset().top;   //正在执行的元素距离文档顶部的距离
            if (w>ctop-20) {                   //当页面向上卷曲的距离大于模块距离文档顶部的距离时候
                navigation.find('li').removeClass('on');
                navigation.find('li').eq(a).addClass('on');
            }
        });
    }).trigger("scroll");
});

lcgyh / myDocs

页面定位导航 #41