css3 position:sticky

标签：影响   根据   解决   viewport   page   设置   遇到   元素   底部   

最近在写一个小程序，项目中遇到一个需求：页面滚动到tab切换菜单时，菜单fixed到页面顶部；

实现方法：

使用小程序的onPageScroll事件，滚动到指定位置添加fixed样式；

bug1：获取指定位置错误，因为上面都是图片，在图片未加载出来时获取高度，高度值不对，解决办法就是在imgae上加bindload事件，在图片加载加载完成之后再获取高度；

bug2：onPageScroll事件会有延迟，导致最终效果会出现卡顿，百度之后知道有一个position:sticky，是一个很有意思的属性；

在屏幕范围是该元素的位置不会受到定位的影响，当该元素的位置将要移出偏移的范围时，定位又会变成fixed。根据设置的left top等属性值成固定位置的效果。
sticky属性的特点：

该元素并不脱离文档流，仍然保留元素原来在文档流中的位置；

当元素在容器中被滚动超过指定的偏移值时，元素就会固定到容器的指定位置，也就是说如果元素设置设置top:50px;那么在sticky元素滚动到距离相对定位元素的顶部50px时固定，不再向上移动；

元素固定的相对偏移是相对于离他最近的具有滚动框的祖先元素，如果祖先元素都没有滚动框，那么就是相对于viewport来计算元素的偏移量

tip:需要考虑父元素的高度的情况，sticky元素在到达】父元素的底部时，则不会再发生定位，如果父元素并没有比sticky元素高，那么sticky元素一开始就到达了底部，就不会有定位的效果，当元素滚动到父元素的底部时sticky属性失效

如果父元素的overflow属性不是默认的visible，那么sticky属性不会生效

但是这个属性的兼容性不是很好，可以使用的浏览器只有FireFox和Safari

css3 position:sticky

标签：影响   根据   解决   viewport   page   设置   遇到   元素   底部   

原文地址：https://www.cnblogs.com/xiaofenguo/p/10102963.html