Npcink Blog
切换菜单

滑动添加和移除 class 标记 - JS 笔记

通过 JS 监听浏览器滑动的高度，满足添加就给指定的 ID 添加或删除 class 标记

最后更新于
本页目录2 节

这段代码会监听网页移动的高度，进而给指定的 ID 添加 class 标记

核心 JS

    window.addEventListener("scroll", function (e) {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(t)
        if (t < 50) {
            document.getElementById("myDIV").classList.remove("mystyle");
        }
        else {
            document.getElementById("myDIV").classList.add("mystyle");
        }
    });

演示

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<h4>Npcink</h4>
    <ul>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li id="myDIV" class="myDIV">向下滚动，我会变色哦</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>0001</li>
        <li>https://www.runoob.com/jsref/prop-element-classlist.html</li>
        <li>https://www.runoob.com/jsref/met-document-getelementsbyclassname.html</li>
    </ul>
    <style>
        .mystyle {
            color: red;
            font-weight: bold;
        }
    </style>
<script type="text/javascript">
    window.addEventListener("scroll", function (e) {
        //alert("滚动了");
        //变量t就是滚动条滚动时，到顶部的距离
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(t)
        if (t < 1000) {
            document.getElementById("myDIV").classList.remove("mystyle");
        }
        else {
            document.getElementById("myDIV").classList.add("mystyle");
        }
    });


</script>