position:sticky

sticky

又名磁贴定位/粘性定位/吸附定位

是relavtive+fixed的完美结合，开始时表现为relative，当到达某特定位置时表现为fixed，制造出吸附效果，适用于一些特殊场景特别是一些导航栏。

比如说当我们想要把导航固定在页面头部时，但该导航栏上还有页面头部需要展示，如果直接用fixed，那么会将页面头部挡住，这时候就可以用sticky了。

sticky语法

position:sticky;
top:0;//根据需求设置具体值

注意

• sticky元素仅在其父元素内生效
• 父元素的高度不能低于sticky元素的高度
• 父元素的 overflow 属性必须是 visible，否则不生效
• 适用上下左右的偏移规则，且必须设置其中一个值，否则不生效
• 产生偏移时，原位置还是会在常规流中
• 如果它的最近祖先元素有滚动，那么它的偏移标尺就是最近的祖先元素
• 如果最近祖先元素没有滚动，那么它的偏移标尺是视口

用js实现思路

监听滚动事件，计算目标元素距离视口的距离。当距离满足条件时，创建占位元素，修改目标元素定位方式为 fixed。

因为sticky是css3新制定的，需要考虑兼容性。可在“www.caniuse.com”查看其兼容性！