jq中导航吸顶,点击导航滚动对应位置并跟随联动效果

最新推荐文章于 2024-07-24 21:11:51 发布

爆炒%浪漫

最新推荐文章于 2024-07-24 21:11:51 发布

阅读量319

点赞数 1

文章标签： html5 html jquery

本文链接：https://blog.csdn.net/npm_run_dev/article/details/120566892

版权

刚开始从网上找代码,找了一圈之后发现,别人的定位都不够准确,不然就是不符合自己的要求,于是自己写了这个代码,希望能和大家共同进步,如果有不足的请指出来

页面布局

 <div class="banner">
        <p>2</p>
        <p>2</p>
        <p>2</p>
        <p>2</p>
    </div>
    <div id="nav">
        <a href="#page1" rel="external nofollow" class="active">page1</a>
        <a href="#page2" rel="external nofollow">page2</a>
        <a href="#page3" rel="external nofollow">page3</a>
        <a href="#page4" rel="external nofollow">page4</a>
        <a href="#page5" rel="external nofollow">page5</a>
        <a href="#page6" rel="external nofollow">page6</a>
        <a href="#page7" rel="external nofollow">page7</a>
        <a href="#page8" rel="external nofollow">page8</a>
        <a href="#page9" rel="external nofollow">page9</a>
        <a href="#page10" rel="external nofollow">page10</a>
    </div>
    <div id="main">
        <div class="mainPage" id="page1">page1</div>
        <div class="mainPage" id="page2" style="height: 400px;">page2</div>
        <div class="mainPage" id="page3">page3</div>
        <div class="mainPage" id="page4">page4</div>
        <div class="mainPage" id="page5" style="height: 300px;">page5</div>
        <div class="mainPage" id="page6">page6</div>
        <div class="mainPage" id="page7">page7</div>
        <div class="mainPage" id="page8">page8</div>
        <div class="mainPage" id="page9" style="height: 900px;">page9</div>
        <div class="mainPage" id="page10">page10</div>
        <div class="mainPage" id="page11" style="height: 900px;">page11</div>
    </div>

jq代码

        $(function () {
            var bannerH = $('.banner').height() - 28 //导航之前高度
            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 scrollT = $(window).scrollTop()
                if (scrollT >= bannerH) {
                    $('#nav').addClass('fixed')
                } else {
                    $("#nav").removeClass('fixed')
                }
                var scrollTop = $(this).scrollTop();
                var k;
                for (var i = 0; i < mainTopArr.length; i++) {
                    for (var i = 0; i < mainTopArr.length; i++) {
                        if (scrollTop >= mainTopArr[i]-56) {
                            k = i;
                        }
                    }
                }
                nav.find("a").eq(k).addClass("active").siblings().removeClass("active");
            });
            nav.find("a[href^='#']").click(function (e) {
                e.preventDefault();
                if ($('#nav').hasClass('fixed')) {
                    $('html, body').animate({ scrollTop: $(this.hash).offset().top - 28 }, 400);
                } else {
                    $('html, body').animate({ scrollTop: $(this.hash).offset().top - 56 }, 400);
                }
            });
        });

完整的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            position: relative;
            height: 100%;
        }
        #nav {
            vertical-align: middle;
            display: flex;
            width: 100%;
            background: red;
        }
        #nav a {
            display: block;
            position: relative;
            width: 98px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background-color: #eee;
            color: #333;
            border-left: 2px solid transparent;
        }
        #nav a:hover {
            width: 98px;
            border-left: 2px solid #4b59ff;
        }
        #nav a p {
            position: relative;
            z-index: 3;
        }
        #nav a.active {
            background-color: #4b59ff;
            color: #fff;
        }
        #main {
            max-width: 1200px;
            margin: 0 auto;
        }
        #main div {
            height: 300px;
            background-color: #efefef;
            border-top: 1px solid #ccc;
        }
        #main div:nth-child(2n) {
            background-color: #fafafa;
        }
        .fixed {
            position: fixed;
            top: 0px;
            left: 0;
            right: 0;
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="banner">
        <p>2</p>
        <p>2</p>
        <p>2</p>
        <p>2</p>
    </div>
    <div id="nav">
        <a href="#page1" rel="external nofollow" class="active">page1</a>
        <a href="#page2" rel="external nofollow">page2</a>
        <a href="#page3" rel="external nofollow">page3</a>
        <a href="#page4" rel="external nofollow">page4</a>
        <a href="#page5" rel="external nofollow">page5</a>
        <a href="#page6" rel="external nofollow">page6</a>
        <a href="#page7" rel="external nofollow">page7</a>
        <a href="#page8" rel="external nofollow">page8</a>
        <a href="#page9" rel="external nofollow">page9</a>
        <a href="#page10" rel="external nofollow">page10</a>
    </div>
    <div id="main">
        <div class="mainPage" id="page1">page1</div>
        <div class="mainPage" id="page2" style="height: 400px;">page2</div>
        <div class="mainPage" id="page3">page3</div>
        <div class="mainPage" id="page4">page4</div>
        <div class="mainPage" id="page5" style="height: 300px;">page5</div>
        <div class="mainPage" id="page6">page6</div>
        <div class="mainPage" id="page7">page7</div>
        <div class="mainPage" id="page8">page8</div>
        <div class="mainPage" id="page9" style="height: 900px;">page9</div>
        <div class="mainPage" id="page10">page10</div>
        <div class="mainPage" id="page11" style="height: 900px;">page11</div>
    </div>
    <!--注意换成自己的jquery的地址-->
    <script src="./jquery.min.js"></script>
    <script>
        $(function () {
            var bannerH = $('.banner').height() - 28 //导航之前高度
            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 scrollT = $(window).scrollTop()
                if (scrollT >= bannerH) {
                    $('#nav').addClass('fixed')
                } else {
                    $("#nav").removeClass('fixed')
                }
                var scrollTop = $(this).scrollTop();
                var k;
                for (var i = 0; i < mainTopArr.length; i++) {
                    for (var i = 0; i < mainTopArr.length; i++) {
                        if (scrollTop >= mainTopArr[i] - 56) {
                            k = i;
                        }
                    }
                }
                nav.find("a").eq(k).addClass("active").siblings().removeClass("active");
            });
            nav.find("a[href^='#']").click(function (e) {
                e.preventDefault();
                if ($('#nav').hasClass('fixed')) {
                    $('html, body').animate({ scrollTop: $(this.hash).offset().top - 28 }, 400);
                } else {
                    $('html, body').animate({ scrollTop: $(this.hash).offset().top - 56 }, 400);
                }
            });
        }); 
    </script>
</body>
</html>

大家有什么更好的方法,可以留言

爆炒%浪漫

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
jq中导航吸顶,点击导航滚动对应位置并跟随联动效果

刚开始从网上找代码,找了一圈之后发现,别人的定位都不够准确,不然就是不符合自己的要求,于是自己写了这个代码,希望能和大家共同进步,如果有不足的请指出来页面布局 <div class="banner"> <p>2</p> <p>2</p> <p>2</p> <p>2</p> </div> <div id
复制链接

扫一扫