移动端开发——吸顶效果的解决方案

一、前言

吸顶效果是web开发中一种常见的交互方式，常见的应用场景有导航、搜索框等等。（图片来自其他博客，感谢博主）

二、在移动端开发遇到的问题

吸顶效果的基本的开发思路，利用scroll事件进行监听scrollTop的值，当scrollTop达到一定的值得时候设置吸顶元素的position : fixed;属性。但是问题是：安卓支持scroll事件和fixed属性，但是ios8.0的scroll事件不是连续触发的，只会在scroll事件结束后触发一次scroll事件，同时ios还不支持设置fixed属性。

Ios支持position: sticky 可以很好的解决这个问题，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

可以知道sticky属性有以下几个特点：

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

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

三、解决思路

         1.检测客户端是安卓系统还是ios系统。

         2.如果是安卓系统添加scroll事件监听

         3.如果是ios系统添加position: sticky 

    
    
    
    


    
Banner图
    
吸顶元素
    
很长的内容