position：sticky实现_position: sticky实验-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45221036/article/details/108397111

本文深入解析CSS3中sticky定位的特性，它结合了relative和fixed定位的优点，使元素在滚动时能够固定在视口内。文章通过实例展示了如何使用sticky属性，并提供了原生实现的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

在这里插入图片描述