顶部导航往往须要固定在页面的顶部，不随滚动而产生绝对视口地位的扭转。
在没有应用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定位解决的场景比较复杂，且波及到的元素多。但把握其原理之后，遇到导航吸顶、底部按钮等场景时，将非常简略、高效。