css3中position:sticky

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

 

实现方法:

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

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

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

 

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

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

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

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

资源网站大全 https://55wd.com 我的007办公资源网站 https://www.wode007.com

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

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

 

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

css3中position:sticky

上一篇:django 中使用request请求失败,requests.exceptions.ConnectionError: HTTPConnectionPool(host='xxx', port=80):


下一篇:JS内存机制