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

顶部导航往往须要固定在页面的顶部，不随滚动而产生绝对视口地位的扭转。

在没有应用 sticky 定位之前，往往采纳 fixed 定位 +placeholder 占位的形式解决；须要借助 javascript 的能力，依据滚动间隔，动静在 fixed 定位和 static 定位两者之间做切换；费时费力，还须要波及大量的滚动计算。

在应用 sticky 定位之后，这一常见场景将仅靠一个定位属性即可实现，简略又实用。上面具体理解一下这个属性。

介绍

为了能直观地理解 sticky 定位，这里引入三个元素：滚动元素、粘性束缚元素和 sticky 元素。

滚动元素：从 dom 层级关系来看，间隔 sticky 元素最近的能滚动的父元素。

粘性束缚元素：sticky 元素的父元素。

sticky 元素：

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

sticky 定位原理

必须给 sticky 元素设置 top、right、bottom、left 中的任何一个值。

因为 sticky 元素 须要绝对 滚动元素定位 ，定位须要地位参数；所以必须给 sticky 元素设置top、right、bottom、left 中的任何一个值。

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 定位解决的场景比较复杂，且波及到的元素多。但把握其原理之后，遇到 导航吸顶 、 底部按钮 等场景时，将非常简略、高效。