原文链接: Fyerl’s Blog

平常的header吸顶，通常是给上一个fixed定位便可完成，而类似于上图如许的“粘黏吸顶”，也是一个比较罕见的需求

“粘黏吸顶”也许的思绪是如许：起首，给吸顶栏一个absolute或许relative定位，经由过程js去监听scroll事宜触发一个推断吸顶栏高度的函数，当吸顶栏的高度间隔可视地区顶部小于即是0时，将其定位体式格局替换成fixed，大于0时再替换回absolute或许relative

以上的思绪在PC端和安卓端均是可行的，但在iOS上，推断高度的函数却并不会跟着scroll事宜每次都触发，而是在滑动住手后才去触发这个函数

google一下“iOS onscroll event delay”得知，这是iOS8作出的转变，在web页面转动时，不触发和实行js
http://developer.telerik.com/…

这里我只是须要完成一个吸顶结果，不触及其他逻辑代码，假如一定要经由过程scroll触发的话，只能运用iSroll等其他第三方库来庖代iOS的原生转动

回到吸顶题目，为了一个结果引入一个第三方库的本钱有点大，因而又寻找了一下，发现了一个晓得然则没有注重过的position属性sticky，望文生义，这个属性的作用就是粘黏，理论上是不须要经由过程js就可以完成“粘黏吸顶”的，然则这个属性在PC端以及安卓挪动端的表现不尽人意，兼容性照样差了点，但是，在iOS端的表现却异常精彩，iOS6.1以上的体系均支撑

所以末了的解决方案就是：
起首推断当前体系，假如是Android，就经由过程通例的监听scroll事宜并运用fixed定位；iOS便运用sticky定位

//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;
}