锚点滚动对应导航高亮显示，导航超出滚动状态跟随

最新推荐文章于 2025-09-10 13:15:36 发布

原创最新推荐文章于 2025-09-10 13:15:36 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

js+jq 专栏收录该内容

21 篇文章

订阅专栏

这篇博客详细介绍了如何使用JavaScript和jQuery实现网页的滚动导航条以及锚点滚动效果。通过监听窗口滚动事件，动态改变导航条中当前选中项，并添加平滑滚动效果，提供良好的用户体验。同时，代码示例展示了如何处理不同标题段落的显示和隐藏，确保导航条始终固定在顶部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .content{width: 100%;overflow-x: scroll;position: fixed;top: 0;left: 0;background: red;}
        .ulBox{width: 100%;display: flex;height: 60px;}
        .ulBox li{list-style: none;}
        .ulBox li a{display: block;text-decoration: none;color: white;height: 30px;margin-top: 15px;line-height: 30px;width: 83px;text-align: center;}
        .ulBox .js_li{background: white;}
        .ulBox .js_li a{color: black;font-weight: bold;}
        .ulMain{margin-top: 60px;}
        .ulMain li{width: 100%;height: 500px;text-align: center;font-size: 30px;}
    </style>
</head>
<body>
    <div class="content">
        <ul class="ulBox">
            <li class="js_li"><a href="#title1">Title1</a></li>
            <li><a href="#title2">Title2</a></li>
            <li><a href="#title3">Title3</a></li>
            <li><a href="#title4">Title4</a></li>
            <li><a href="#title5">Title5</a></li>
            <li><a href="#title6">Title6</a></li>
            <li><a href="#title7">Title7</a></li>
            <li><a href="#title8">Title8</a></li>
            <li><a href="#title9">Title9</a></li>
            <li><a href="#title10">Title10</a></li>
        </ul>
    </div>
    <ul class="ulMain">
        <li style="background: #f7acbc;" id="title1">Title1</li>
        <li style="background: #deab8a;" id="title2">Title2</li>
        <li style="background: #817936;" id="title3">Title3</li>
        <li style="background: #444693;" id="title4">Title4</li>
        <li style="background: #ef5b9c;" id="title5">Title5</li>
        <li style="background: #f47920;" id="title6">Title6</li>
        <li style="background: #87843b;" id="title7">Title7</li>
        <li style="background: #2a5caa;" id="title8">Title8</li>
        <li style="background: #905a3d;" id="title9">Title9</li>
        <li style="background: #b2d235;" id="title10">Title10</li>
    </ul>
    <script>
        $(function(){
            //锚点增加滚动效果
            $('a[href*=#],area[href*=#]').click(function() {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var $target = $(this.hash);
                    $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
                    if ($target.length) {
                        var targetOffset = $target.offset().top-$('.ulBox').height();//这里减掉导航高度
                        $('html,body').animate({
                                scrollTop: targetOffset
                            },
                            300);
                        return false;
                    }
                }
            });
            // 滚动导航显示状态跟随
            $(window).scroll(function(){
                let winPos = $(window).scrollTop(); //屏幕位置
                let topHeight = $('.ulBox').height();
                let list = $('.ulMain li');
                let NodePos = []//方法一循环 方法一与方法二根据实际情况
                for(let i = 0;i<list.length; i++){
                    NodePos.push(list.eq(i).offset().top-topHeight)
                }
                // 方法二固定写法
                // let NodePos = [
                //     $('#title1').offset().top-topHeight,
                //     $('#title2').offset().top-topHeight,
                //     $('#title3').offset().top-topHeight,
                //     $('#title4').offset().top-topHeight,
                //     $('#title5').offset().top-topHeight,
                //     $('#title6').offset().top-topHeight,
                //     $('#title7').offset().top-topHeight,
                //     $('#title8').offset().top-topHeight,
                //     $('#title9').offset().top-topHeight,
                //     $('#title10').offset().top-topHeight,]//提前获取好元素位置减去导航高度
                let length = NodePos.length;
                if(winPos<=NodePos[0]){
                    $('.ulBox li').removeClass('js_li');
                    $('.ulBox li:nth-child(1)').addClass('js_li');
                }else{
                    for(let i = 0;i<length; i++){
                        if((i < length -1 && winPos<NodePos[i+1]&&winPos>=NodePos[i]) || (i == length -1 && winPos<=NodePos[i])){
                            let _thisIndex = i
                            let _width = $('.ulBox li a').width()
                            $('.content').stop().animate({scrollLeft:_thisIndex*_width-_width*2},0);
                            $('.ulBox li').removeClass('js_li');
                            $('.ulBox li:nth-child('+(i+1)+')').addClass('js_li');
                            break;
                        }
                    }
                }


            });
        })
    </script>
</body>
</html>