在移动端项目中，遇到一个问题：同一页面内有多个滚动组件，导航栏需随滚动组件一起滚动，当到达顶部时固定。但在组件切换时，导航栏出现滚动错乱和瞬间跳动。解决方法包括动态调整导航栏滚动距离或使用浮动导航栏进行隐藏显示切换，但两者都有计算复杂性和可能的体验问题。目前采用折中方案，每次进入时将所有组件滚动到接近导航栏位置，以避免记录滚动距离的不连续性。
最近做一个移动端项目的时候，有一个页面的需求是在同一个页面里，通过导航栏切换出不同的滚动组件，导航栏也要跟着滚动组件一起上下滚动，当导航栏到达顶部时悬浮在顶部，不再随滚动组件一起滚动了，组件则继续向上滚动。如图所示：
进入页面状态：
向上滚动：
到达顶部：导航栏悬浮
刚开始结构上导航栏、顶部展示区和底部主体区域是一个滚动整体，判断滚动距离，当距离大于顶部展示区时，将导航栏抠出来，fixed在顶部，距离小于顶部展示区时，则用绝对定位嵌回去，随主体一起滚动。
但是当多个滚动组件之间切换的时候就会导致错乱：比如组件1滚动距离超过了顶部展示区高度180，导航栏此时处于悬浮状态。此时切换到组件2，其滚动距离小于顶部展示区高度180，此时滚动组件2就会使得导航栏绝对定位到内部，再切换回组件1，由于滚动距离大于180，滚动的时候导航栏应
最低0.47元/天 解锁文章
扫一扫
1521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
