在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky
,它是相对定位(position:relative
)和固定定位(position:fixed
)的混合。
使用它,我们不再用监听scroll事件,即可实现导航栏滚动绝对定位的效果。
基本用法
nav{
position:sticky;
top:10px; /* 阈值 */ }
top/bottom属性
比如我们设置top:100px
时,在 viewport 视口滚动到元素距离小于设置的top:100px
之前,元素为相对定位。当滚动到top:100px
之后,元素将固定在与顶部距离 top:100px
的位置,直到 viewport 视口回滚到阈值以下。
根据下面的例子,我们可以看到position:sticky
元素设置的top值是距离视口的距离,当它滚到距离低于其值时将固定在视口当中,此时该元素的效果就为固定定位。
下面例子的结构:
<h1 style="height:200px;">顶部高200px 红线为中线
</h1> <nav style="position:sticky">这是导航 top:100px</nav> <p>滚一个</p> <p>滚一个</p>
生效条件
需要注意的是,使用该属性有几个必要条件,否则会失效:
- 父元素不能
overflow:hidden
或者overflow:auto
属性。 - 必须指定
top
、bottom
、left
、right
4个值之一,否则只会处于相对定位 - 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效
兼容
position: -webkit-sticky;
position: sticky;
小礼物走一走,来简书关注我