# 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>