顶部导航往往须要固定在页面的顶部，不随滚动而产生绝对视口地位的扭转。
在没有应用 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 元素体现为固定定位的条件
sticky 元素须要达到固定定位的地位。-
为
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 之间 有元素存在，且能撑起肯定的空间。
- 例如：当 sticky 元素设置
粘性束缚元素与滚动元素之间不能存在款式属性为overflow: hidden的元素。
sticky 元素的体现
- sticky 元素会创立一个新的层叠上下文；但在父元素中会留下占位符，不会影响任何其余元素的地位。
- 同一个
粘性束缚元素的多个sticky 元素，当体现为固定定位时，可能会重叠在一起；默认状况下，靠后的sticky 元素层级比靠前的高，但能够通过z-index调整。
具体的例子
两个 sticky 元素顺次不同高度吸顶
入手试试看
总结
绝对其余三种定位（绝对定位、相对定位、固定定位）而言，sticky 定位解决的场景比较复杂，且波及到的元素多。但把握其原理之后，遇到 导航吸顶 、 底部按钮 等场景时，将非常简略、高效。