WEB移动端粘黏吸顶效果的解决方案

gt4317 4年前
   <p style="text-align: center;"><img src="https://simg.open-open.com/show/5d5fdbcd95faa6a25a7cb6d2a5dd8c18.gif"></p>    <p>一般的header吸顶,通常是给上一个fixed定位便可实现,而类似于上图这样的“粘黏吸顶”,也是一个比较常见的需求</p>    <p>“粘黏吸顶”大概的思路是这样:首先,给吸顶栏一个absolute或者relative定位,通过js去监听scroll事件触发一个判断吸顶栏高度的函数,当吸顶栏的高度距离可视区域顶部小于等于0时,将其定位方式替换成fixed,大于0时再替换回absolute或者relative</p>    <p>以上的思路在PC端和安卓端均是可行的,但在iOS上,判断高度的函数却并不会随着scroll事件每次都触发,而是在滑动停止后才去触发这个函数</p>    <p>google一下“iOS onscroll event delay”得知,这是iOS8作出的改变,在web页面滚动时,不触发js</p>    <p><a href="/misc/goto?guid=4959739087532984122" rel="nofollow,noindex">http://developer.telerik.com/...</a></p>    <p>这里我只是需要实现一个吸顶效果,不涉及其他逻辑代码,如果一定要通过scroll触发的话,只能使用iSroll等其他第三方库来取代iOS的原生滚动</p>    <p>回到吸顶问题,为了一个效果引入一个第三方库的成本有点大,于是又寻找了一下,发现了一个知道但是没有重视过的position属性sticky,顾名思义,这个属性的作用就是粘黏,理论上是不需要通过js就能实现“粘黏吸顶”的,但是这个属性在PC端以及安卓移动端的表现不尽人意,兼容性还是差了点,然而,在iOS端的表现却非常出色,iOS6.1以上的系统均支持</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/988e343b559ef8706a58e2f947b5d4e5.jpg"></p>    <p>所以最后的解决方案就是:</p>    <p>首先判断当前系统,如果是Android,就通过常规的监听scroll事件并使用fixed定位;iOS便使用sticky定位</p>    <pre>  //Android  .tab-box-fixed {    position: fixed;    z-index: 5;  }  //iOS  .tab-box-sticky {    position: -webkit-sticky;    position: sticky;    top: 0;    left: 0;    z-index: 5;  }</pre>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000008489692</p>    <p> </p>