position: sticky 到底是什么?

·  阅读 1534
position: sticky 到底是什么?

position-sticky 生效的原理

在 W3 官方文档中的定义是:Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.

翻译一下,sticky 定位可以表现出 relative 和 fixed 两种定位结合,正常情况下是 relative,但是当 sticky 元素的父元素(the nearest scrollport,最近的滚动容器)出现滚动条的时候,sticky 元素距离到设置的位置如(top: 0)时会表现为 fixed,相对于 the nearest scrollport 的 fixed。

其中有一个非常重要的概念就是 nearest scrollport,它表示 sticky 元素在即将消失前会相对它最近的 scrollport 去做定位。

正常使用

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}
复制代码

整个网页出现滚动条,nearest scrollport 是网页的 body,所以当出现滚动条时,黄色背景的内容会相对于网页定位到 top: 0 的位置

codepen 地址 codepen.io/yy88xu/pen/…

bbvma-toroo.gif

overflow:visible

父级元素不能有任何 overflow:visible 以外的overflow设置,否则没有粘滞效果。

首先我很不懂这句话的含义,所以背其道而行,我设置了父级元素 overflow:auto 想看一下效果。 即下面这个 demo,codepen 地址 codepen.io/yy88xu/pen/…

.big-wrap{
  max-height: 500px;
  border: 1px solid black;
  overflow: auto;    /* 背其道而行 */
}
.nav{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  padding: 10px;
  background: yellow;
}
复制代码

效果:黄色背景元素 .nav 的 nearest scrollport 是 .big-wrap 容器,所以在 .big-wrap 容器里当出现滚动条的时候,元素 .nav 可以 fixed 在 .big-wrap 容器里面 top: 0px; 的位置。

7ks6y-10i3v.gif

所以很多文章说的 “父级元素不能有任何 overflow:visible 以外的overflow设置,否则没有粘滞效果。” 是不合理的!父元素设置了 overflow: auto 或者 overflow: scroll 粘滞效果仍然存在,只是 nearest scrollport 不是网页(整个屏幕 screen),而是父元素本身。

讨论

我觉得理解了 position: sticky 触发粘滞效果的条件,使用时应该不会有不起作用的问题吧?如果有的话,欢迎大家评论讨论,我们一起学习探索。

启发的有用网址

优秀使用案例集:segmentfault.com/a/119000003…
探究 position-sticky 失效问题: www.cnblogs.com/coco1s/p/14…
developer:developer.mozilla.org/en-US/docs/…

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改