最近做一个移动端项目的时候，有一个页面的需求是在同一个页面里，通过导航栏切换出不同的滚动组件，导航栏也要跟着滚动组件一起上下滚动，当导航栏到达顶部时悬浮在顶部，不再随滚动组件一起滚动了，组件则继续向上滚动。如图所示：
进入页面状态：
向上滚动：
到达顶部：导航栏悬浮
刚开始结构上导航栏、顶部展示区和底部主体区域是一个滚动整体，判断滚动距离，当距离大于顶部展示区时，将导航栏抠出来，fixed在顶部，距离小于顶部展示区时，则用绝对定位嵌回去，随主体一起滚动。
但是当多个滚动组件之间切换的时候就会导致错乱：比如组件1滚动距离超过了顶部展示区高度180，导航栏此时处于悬浮状态。此时切换到组件2，其滚动距离小于顶部展示区高度180，此时滚动组件2就会使得导航栏绝对定位到内部，再切换回组件1，由于滚动距离大于180，滚动的时候导航栏应该处于悬浮状态，这就导致导航栏出现瞬间跳动到顶部的现象。
滚动距离小于180：
滚动距离大于180，滑动页面：
导航栏瞬间跳动到最顶部：
出现这种情况是由于导航栏的滚动距离和主体结构的滚动距离关联在一起的，而切换之后距离会有很大的变化，导致导航栏的滚动距离的不连续性。
解决办法：1、导航栏切换后通过计算目标组件的滚动距离来动态调整导航栏的滚动距离，但这样情况组合繁多，计算复杂
2、在顶部浮动一个导航栏，隐藏处理，当滚动距离大于180时将其显示出来，替换实际导航栏的功能，小于180时将其隐藏，达到需求效果。这样可以将导航栏和滚动组件剥离，独立出来，便于操作，且不用做太多的dom操作。
经过试验，依然需要计算数据，并且出现相同的情况。只有暂时选择一个折中的方案，虽然体验不太好，后续有了方案了再做修改，即：离开时不记录各组件的滚动距离，进入的时候统一滚动到贴近导航栏的位置。