一个神奇的定位方式 - position: sticky

顶部导航往往需要固定在页面的顶部,不随滚动而发生相对视口位置的改变。

在没有使用sticky定位之前,往往采用fixed定位+placeholder占位的方式解决;需要借助javascript的能力,根据滚动距离,动态在fixed定位和static定位两者之间做切换;费时费力,还需要涉及大量的滚动计算。

在使用sticky定位之后,这一常见场景将仅靠一个定位属性即可完成,简单又实用。下面详细了解一下这个属性。

介绍

为了能直观地了解sticky定位,这里引入三个元素:滚动元素、粘性约束元素和sticky元素。

滚动元素:从dom层级关系来看,距离sticky元素最近的能滚动的父元素。

粘性约束元素:sticky元素的父元素。

sticky元素:

  • 设置了position: sticky的元素。
  • sticky定位,分为两个状态:相对定位、固定定位
  • 当sticky定位表现固定定位时,sticky元素相对于滚动元素定位。

sticky定位原理

必须给sticky元素设置toprightbottomleft中的任何一个值。

因为sticky元素需要相对滚动元素定位,定位需要位置参数;所以必须给sticky元素设置toprightbottomleft中的任何一个值。

sticky元素与滚动元素、粘性约束元素三者之间的UI表现

sticky元素的显示范围

sticky元素(content+padding+border+margin)只能在粘性约束元素content范围内移动。

当为sticky元素设置偏移样式时,可以显示在粘性约束元素的content范围之外;但sticky定位的本质不会改变,只是sticky元素的显示位置发生了偏移。

当sticky元素表现固定定位时,其定位逻辑

sticky元素设置的定位距离,体现在:sticky元素的外边界(border or padding or content)到滚动元素的内边界(padding or content)之间的距离

sticky元素表现为固定定位的条件

  1. sticky元素需要达到固定定位的位置。
  2. sticky元素设置位置参数,相反方向上sticky元素的外边界(margin or border or padding or content)到粘性约束元素的内边界(content)之间需要有元素,可以撑起一定的空间,供sticky元素固定定位使用。

    • 例如:当sticky元素设置top之后;sticky元素的外边界(margin-bottom or border-bottom or padding-bottom or content-bottom)到粘性约束元素的content-bottom之间有元素存在,且能撑起一定的空间
  3. 粘性约束元素滚动元素之间不能存在样式属性为overflow: hidden的元素。

sticky元素的表现

  1. sticky元素会创建一个新的层叠上下文;但在父元素中会留下占位符,不会影响任何其他元素的位置。
  2. 同一个粘性约束元素的多个sticky元素,当表现为固定定位时,可能会重叠在一起;默认情况下,靠后的sticky元素层级比靠前的高,但可以通过z-index调整。

具体的例子

两个sticky元素依次不同高度吸顶

动手试试看

总结

相对其他三种定位(相对定位、绝对定位、固定定位)而言,sticky定位处理的场景比较复杂,且涉及到的元素多。但掌握其原理之后,遇到导航吸顶底部按钮等场景时,将十分简单、高效。

作者:尽吾志者 原文地址:https://segmentfault.com/a/1190000043344902

%s 个评论

要回复文章请先登录注册