[js] 滚动吸顶简易版

最新推荐文章于 2024-12-26 15:32:46 发布

533_

最新推荐文章于 2024-12-26 15:32:46 发布

阅读量194

点赞数

分类专栏： # js 文章标签： CSS JavaScript 吸顶效果网页动画滚动事件

本文链接：https://blog.youkuaiyun.com/qq_14993591/article/details/120198626

版权

js 专栏收录该内容

160 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            height: 5000px;
        }

        div{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: pink;
            color: #fff;
            position: fixed;
            top:0;
            left: 0;
            font-size: 30px;
            /* 不能实现动画效果 */
            /* display: none; */
            /* visibility: hidden; */

            /* 可以通过 过渡 实现动画效果 */
            /* opacity: 0; */
            height: 0;
            overflow:hidden;


            transition: all 2s;
        }
    </style>
</head>
<body>
    <div>我是吸顶div标签</div>

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

        // 页面上卷监听事件 只要 页面 上卷 左移 都会触发事件
        window.addEventListener( 'scroll' , function(){
            // 获取 页面上卷高度
            var scrollTop = document.documentElement.scrollTop;
            console.log( scrollTop );

            // 当 上卷高度数值 大于 设定数值 让 div显示
            if( scrollTop > 500 ){
                oDiv.style.height = '50px';

            // 当 上卷高度数值 不大于 设定数值 让 div隐藏
            }else{
                oDiv.style.height = 0;

            }
        })
    </script>



</body>
</html>