# position:sticky实现

position:sticky是一个新的css3属性,它的表现类似position:relativeposition: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>

在这里插入图片描述

#

Last Updated: 8/1/2021, 1:43:20 PM