js检测滚动

记笔记,免忘记!

借鉴网上的

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';
        };
    };

链接

阅读更多

没有更多推荐了,返回首页