移动端吸顶效果的兼容性

吸顶效果的开发思路:利用scroll事件进行监听scrollTop的值,当scrollTop达到一定的值的时候设置吸顶元素的position:fixed属性
问题:ios8的scroll的scroll事件不是连续触发的,只会在scroll事件结束后触发一次scroll事件,同时ios不支持fixed属性。
解决:ios支持position:sticky 可以很好的结局而这个问题
 
sticky属性的特点:
该元素不脱离文档流,仍然保留元素原本在文档流中的位置; 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量
 
检测客户端是安卓还是ios,安卓系统添加scroll事件监听;ios系统添加position:sticky
原文地址:https://www.cnblogs.com/llff123/p/11957600.html