最近做一个移动端项目的时候,有一个页面的需求是在同一个页面里,通过导航栏切换出不同的滚动组件,导航栏也要跟着滚动组件一起上下滚动,当导航栏到达顶部时悬浮在顶部,不再随滚动组件一起滚动了,组件则继续向上滚动。如图所示:
进入页面状态:
向上滚动:
到达顶部:导航栏悬浮
刚开始结构上导航栏、顶部展示区和底部主体区域是一个滚动整体,判断滚动距离,当距离大于顶部展示区时,将导航栏抠出来,fixed在顶部,距离小于顶部展示区时,则用绝对定位嵌回去,随主体一起滚动。
但是当多个滚动组件之间切换的时候就会导致错乱:比如组件1滚动距离超过了顶部展示区高度180&