原生JS 吸顶demo

/* * css  代码片段 */
 *{
            margin:0;
            padding:0;
        }

        body{
            height: 5000px;
        }

        div{
            width: 100%;
            height: 0px;
            font-size: 30px;
            color: #fff;
            background: skyblue;
            text-align: center;
            line-height: 50px;
            overflow: hidden;
            transition: all 1s;
            position: fixed;
            top:0;
            left: 0;

<!-- html 代码片段 -->
<div>我是吸顶div</div>

//JS代码片段
<script>
    // 获取div标签对象
    var oDiv = document.querySelector('div');

    // 浏览器滚动监听事件
    // 每次 浏览器滚动时 都会触发执行 定义的函数程序
    window.onscroll = function(){
        // 每次页面滚动,触发的程序
        console.log(111);
        
        // 1, 获取浏览器上卷高度
        var h = document.documentElement.scrollTop;

        // 2, 定义判断程序
        if( h > 500 ){
            // 如果上卷高度 大于 设定的高度
            // 显示 吸顶div 也就是 设定 css高度属性值
            oDiv.style.height = '50px';
        }else{
            // 如果没有超过 设定的高度
            // 隐藏 吸顶div 也就是 设定 css高度属性值为0
            oDiv.style.height = '0px';

        }
    }
</script>

效果：

思路：

吸顶demo
    页面顶部有一个 div 固定定位在 页面的顶部
    平时状态是 隐藏状态
    当 浏览器 上卷 超过 一定高度 吸顶div显示 有高度

window.onscroll  当 浏览器 上卷 左移 触发的函数程序
    浏览器滚动监听事件
        如果是 移动鼠标滚轮触发
        一次鼠标滚轮运动 会 移动 多个px 像素
        也就是会触发 多次 浏览器滚动监听事件