position：sticky实现

最新推荐文章于 2023-05-02 21:00:00 发布

高桥靓仔

最新推荐文章于 2023-05-02 21:00:00 发布

阅读量343

点赞数

本文链接：https://blog.csdn.net/weixin_45221036/article/details/108397111

版权

position：sticky实现

position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed 的合体，当目标区域在屏幕中可见时，它的行为就像position:relative；当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。（注意：top和left优先级分别大于bottom和right）

在这里插入图片描述

原生实现：

<style>
    .header {
        width: 100%;
        background: #f6d565;
        padding: 25px 0;
    }
    .sticky {
        position: fixed;
        top: 0;
    }
</style>
<body>
    <div style='height: 200px;'></div>
    <div class="header"></div>
    <div style='height: 1000px;'></div>
</body>
<script>
    var header = document.querySelector('.header');
    var originOffsetY = header.offsetTop;//获取该元素初始的距父元素顶部的高度
    function onScroll(e) {
        window.scrollY >= originOffsetY///屏幕顶部到页面顶部的距离大于获取的原始值
            ? header.classList.add('sticky')
            : header.classList.remove('sticky')
    }
    document.addEventListener('scroll', onScroll)
</script>

在这里插入图片描述

高桥靓仔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
position：sticky实现

position：sticky实现position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed 的合体，当目标区域在屏幕中可见时，它的行为就像position:relative；当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。（注意：top和left优先级分别大于bottom和right）原生实现：<style> .header { width: 100%
复制链接

扫一扫