Web前端——鼠标滚动一定距离用js添加或删除元素的类名

最新推荐文章于 2025-08-12 13:41:57 发布

《独自往前》

最新推荐文章于 2025-08-12 13:41:57 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Singe_lq/article/details/131689587

该代码段使用JavaScript监听窗口的滚动事件，当页面滚动超过100像素时，给顶部导航盒(.top-box)添加on类，从而改变背景色；当滚动回到顶部时，移除该类，恢复原状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <script>
        //导航滚动时增加背景色
        window.addEventListener('scroll', function () {
            let header = document.querySelector('.top-box');
            if (window.scrollY > 100) {
                header.classList.add('on');
            } else {
                header.classList.remove('on');
            }
        });
    </script>