小控件——电梯导航事件

最新推荐文章于 2023-07-06 20:20:08 发布

流动的白沙

最新推荐文章于 2023-07-06 20:20:08 发布

阅读量212

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Linshu__/article/details/121071497

版权

该博客介绍了如何使用JavaScript实现网页中的楼层导航功能。当用户点击楼层按钮或页面滚动时，导航按钮会根据当前浏览位置高亮显示。通过设置节流阀防止频繁触发事件，并利用window.pageYOffset判断页面滚动位置，实现平滑的楼层切换效果。

摘要由CSDN通过智能技术生成

html:

      <!-- 楼梯模块 -->
        <div class="floor">
            <div>小说</div>
            <div>动漫</div>
            <div>漫画</div>
            <div>电视剧</div>
            <div>留言</div>
        </div>

js:

   // 8.电梯事件
    var floors = document.querySelectorAll('.floor div')
    var novel1 = document.querySelector('.novel').offsetTop
    var cartoon2 = document.querySelector('.cartoon').offsetTop
    var caricature3 = document.querySelector('.caricature').offsetTop
    var opera4 = document.querySelector('.opera').offsetTop
    var comment5 = document.querySelector('.comment').offsetTop
    var arr = [novel1, cartoon2, caricature3, opera4, comment5]

    var flag = true  //添加节流阀（互斥锁） 当我们点击电梯按钮的时候，页面会滚动，会触发页面滚动事件

    // (1)点击电梯按钮会滑动到不同的页面
    for (var i = 0; i < floors.length; i++) {
        // 此时i是1，2，3，4 设置属性
        floors[i].setAttribute('index', i)
        floors[i].addEventListener('click', function () {
            // 产生了点击事件，才把节流阀关闭
            flag = false
            // 此时i变成undefined
            var index = this.getAttribute('index')
            for (var i = 0; i < floors.length; i++) {
                floors[i].className = ''
            }
            this.className = 'changeFloorColor '
            upDown(window, arr[index], function () {
                flag = true
            })
        })
    }
 // (2).页面滚动事件对应电梯导航按钮
    if (flag) {
        document.addEventListener('scroll', function () {
            if (window.pageYOffset <= arr[0]) { //window.pageYOffset 是页面被卷去的头部
                for (var i = 0; i < floors.length; i++) {
                    floors[i].className = ''
                }
                floors[0].className = 'changeFloorColor '
            } else if (window.pageYOffset <= arr[1]) { //window.pageYOffset 是页面被卷去的头部
                for (var i = 0; i < floors.length; i++) {
                    floors[i].className = ''
                }
                floors[1].className = 'changeFloorColor '
            } else if (window.pageYOffset <= arr[2]) { //window.pageYOffset 是页面被卷去的头部
                for (var i = 0; i < floors.length; i++) {
                    floors[i].className = ''
                }
                floors[2].className = 'changeFloorColor '
            } else if (window.pageYOffset <= arr[3]) { //window.pageYOffset 是页面被卷去的头部
                for (var i = 0; i < floors.length; i++) {
                    floors[i].className = ''
                }
                floors[3].className = 'changeFloorColor '
            } else {
                for (var i = 0; i < floors.length; i++) {
                    floors[i].className = ''
                }
                floors[4].className = 'changeFloorColor '
            }
        })
    }