简易吸顶效果

最新推荐文章于 2024-09-14 19:44:09 发布

今天吃点啥‍️

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量413

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/buaichiluobo/article/details/123644023

版权

JavaScript CSS定位页面滚动吸附效果事件监听

关键词由CSDN通过智能技术生成

描述：当页面向下滚动到一定距离，特定的部分会被吸附在页面最顶端，向上滚动一定距离会回归原位

核心:判断滚动距离与占位高度之间的关系并利用position定位来实现

html部分：

    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p class="cur">吸顶</p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

css部分：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            width: 100%;
            height: 50px;
            background-color: burlywood;
            margin-bottom: 5px;
        }

       .cur{
            background-color: cadetblue;
            text-align: center;
            line-height: 50px;
            color: #fff;
            font-size: 25px;
            /* display: none; */
        }
    </style>

js部分：

 <script>
        /*
            页面滑动一段距离，指定标签吸附在顶上
        */
        //    获取元素
        var cur = document.querySelector('.cur');
        console.log(cur);
        //    添加事件
        var ot = cur.offsetTop;
        document.onscroll = function () {
            var st = document.documentElement.scrollTop;
            // console.log(st);
            if (st > ot) {
                cur.style.position = 'fixed';
                cur.style.top = 0;
            } else {
                cur.style.position = 'relative';
                // console.log(cur.style.position);
            }

        }
    </script>