css3中position:sticky

时间: 2018-12-11阅读: 1625标签: position

最近在写一个小程序,项目中遇到一个需求:页面滚动到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

来源:https://www.cnblogs.com/xiaofenguo/p/10102963.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1551

关闭

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!