Javascript特效：导航栏楼层效果

最新推荐文章于 2024-04-10 15:12:17 发布

KaiSarH

最新推荐文章于 2024-04-10 15:12:17 发布

阅读量822

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.csdn.net/KaiSarH/article/details/103754330

JS 专栏收录该内容

118 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的楼层导航与页面内容互动效果。通过监听滚动事件和点击事件，动态更新导航条的高亮状态，同时平滑滚动到指定楼层。代码中详细展示了如何获取元素位置、设置样式以及实现平滑滚动。

知识点

多个事件有冲突的时候，需要设置flag判断是什么事件，进而进行后续操作。
楼层效果就是判断scrollTop和offsetTop的关系
引入工具库工具库

运行效果

导航与界面实现互动
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;border:0;}
        html, body, ul{width: 100%;height: 100%;}
        #ul li{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 30px;
            /*background-color: red;*/
            color: #fff;
        }

        #ol{
            width: 80px;
            background-color: #ccc;
            position: fixed;
            left: 50px;
            top: 200px;
            border: 1px solid #fff;
        }

        #ol li{
            text-align: center;
            line-height: 30px;
            border-bottom: 1px solid #fff;
            color: #fff;
            cursor: pointer;
        }

        #ol li.current{
            background-color: orangered;
        }
    </style>
</head>
<body>
   <!--导航-->
   <ol id="ol">
       <li class="current">第1层</li>
       <li>第2层</li>
       <li>第3层</li>
       <li>第4层</li>
       <li>第5层</li>
   </ol>
   <!--楼层-->
   <ul id="ul">
       <li>第1层内容</li>
       <li>第2层内容</li>
       <li>第3层内容</li>
       <li>第4层内容</li>
       <li>第5层内容</li>
   </ul>

<script src="../../00MyTools/MyTools.js"></script>
<script>
    window.addEventListener('load', function (ev) {
         // 1. 获取标签
        var ol = myTool.$('ol'), ul = myTool.$('ul');
        var ulLis = ul.children;
        var olLis = ol.children;

        // 是否是点击产生的滚动
        var isClick = false;

        // 2. 上色
        var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];
        for (var i = 0; i < colorArr.length; i++) {
            ulLis[i].style.backgroundColor = colorArr[i];
        }

        // 3. 监听导航点击
        for (var j = 0; j < olLis.length; j++) {
            var olLi = olLis[j];
            (function (index) {
                olLi.addEventListener('click', function () {
                    isClick = true;
                    for (var i = 0; i < olLis.length; i++) {
                        olLis[i].className = '';
                    }
                    this.className = 'current';
                    // document.documentElement.scrollTop = index * myTool.client().height;

                    myTool.slowMoving(document.documentElement, {'scrollTop': index * myTool.client().height}, function () {
                        isClick = false;
                    });
                });
            })(j)
        }

        // 4. 监听滚动
        var roll = 0;
        window.addEventListener('scroll', function (ev1) {
            if(!isClick){
                // 4.1 获取头部滚动偏移的高度
                roll = Math.ceil(Number(myTool.scroll().top));

                // 4.2 遍历
                for (var i = 0; i < ulLis.length; i++) {
                    // 4.3 判断
                    if(roll >= ulLis[i].offsetTop){
                        for (var j = 0; j < olLis.length; j++) {
                            olLis[j].className = '';
                        }
                        olLis[i].className = 'current';
                    }
                }
            }
        })
    });
</script>
</body>
</html>