ios中吸顶需求引起的一系列问题

最近在写移动端，有一个需求是滚动时使tab吸顶，如图

开始的思路是监听最外层元素，外层元素的scrollTop >= tab的offsetTop 就设置一个flag为true，flag为true时给list添加高度和overflow-y: scroll;

 

 

发现这样写tab滚到最上面的时候就滚不下来了。

 

所以尝试另外一种方法，给tab加上position：sticky; top: 0;  结果这样写会导致在ios上滚动不流畅，百度之后说可以使用-webkit-overflow-scrolling: touch; 

 

 

加了这个属性之后  在滚动时候tab会消失，position：sticky失效。滚动停止之后才会生效。

 

不得已，只能想别的办法，网上找了个三方库（better-scroll）,但是因为在transform内position：fixed会不生效。所以找了个折中的方法。

 

在使用better-scroll的元素的同级放一个用来占位的tab, 因为是往下滚动，所判断条件是<= -应用高度时占位元素显示，否则占位元素消失。ios滚动时吸顶就此解决。

 

使用better-scroll时，需要注意的是一定要先执行refresh() 和外层元素设置高度后，内层元素不要设置高度，靠内容撑开，否则无法滚动