js检测滚动

最新推荐文章于 2024-11-20 11:42:09 发布

zilvzsy

最新推荐文章于 2024-11-20 11:42:09 发布

阅读量850

点赞数

分类专栏：个人解惑文章标签：滚动

个人解惑专栏收录该内容

21 篇文章

订阅专栏

记笔记，免忘记！

借鉴网上的

HMTL:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>

<body>
    <header>
    </header>
    <section style="height: 1500px;background-color: #f0f0f0">
    </section>
    <footer>
    </footer>
</body>
</html>

JS:

window.onscroll = function () {

        var a = document.documentElement.scrollTop || document.body.scrollTop;//滚动条y轴上的距离
        var b = document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度
        var c = document.documentElement.scrollHeight || document.body.scrollHeight;//可视化的高度与溢出的距离（总高度）
        if(a > 0){
            document.querySelector('#header').style.top = 0 + 'px';
        }else{
            document.querySelector('#header').style.top = 36 + 'px';
        };
    };

链接