CSS粘性定位 position:sticky

在研究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>
  • 设置top:100px
    设置top:100px

生效条件

需要注意的是,使用该属性有几个必要条件,否则会失效:

  1. 父元素不能overflow:hidden或者overflow:auto属性。
  2. 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
  3. 父元素的高度不能低于sticky元素的高度
  4. sticky元素仅在其父元素内生效

兼容

 position: -webkit-sticky;
 position: sticky;

本文转载于https://www.jianshu.com/p/b72f504121f5

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值