前端开发-周文彬

position:sticky 粘性布局

在携程旅行客户端,高端美食里面,有一个效果,需要滚动到一定的高度把tab置顶。

Screenshot_2014-06-03-09-31-44_MarkMan

红框的地方向上滚动置顶。

Screenshot_2014-06-03-09-31-56

一般的想法是position设置成static,滚动到一定的高度换成fixed。但是切换的过程有点卡顿。

女神点头猪说有一个 sticky 属性可以实现这个功能,chrome需要开启:chrome://flags/#enable-experimental-web-platform-features

火狐在地址栏输入about:config 设置 layout.css.sticky为enabled

这个属性还比较新,看下支持情况。

image

ios6以上支持,写个demo测试看看。

sticky

 

sticky

chrome上的测试效果。

在线二维码生成器

手机可以扫描二维码查看,ios支持的很好,安卓需要做降级处理。


已知的几个问题,外层overflow设置成auto,scroll,hidden会失效。


sticky

需要设置top值,设置成bottom失效。


sticky
评论

专注于前端开发技术,喜欢研究图形和动画,关注数据可视化。

© 前端开发-周文彬 | Powered by LOFTER