[转]position-sticky的实现

最新推荐文章于 2025-03-14 10:10:32 发布

转载最新推荐文章于 2025-03-14 10:10:32 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/luozt/blog/268852

为什么80%的码农都做不了架构师？>>>

position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

HTML5浏览器实现：

<!-- lang: css -->
.sticky {
  position: -webkit-sticky;
  position:sticky;
  top: 15px;
}

其他浏览器实现：

<!-- lang: html -->
<style>
.sticky { position: fixed; top: 0; }
.header { width: 100%; background: #F6D565; padding: 25px 0; }
</style>

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
 window.scrollY >= origOffsetY ? header.classList.add('sticky') : header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

转载于:https://my.oschina.net/luozt/blog/268852