移动端导航栏水平滚动

Question

1，移动端项目，有一个导航栏，如图所示
## 标题文字 ##
2，现在需要在页面滚动的时候，导航栏能左右滚动。比如说页面滚动到内容六，导航栏往左滑动，菜单栏六出现在屏幕中间。往上滚动到内容五，菜单栏往右滚动，菜单栏5出现在页面中间。请问效果怎么实现？

3，请问怎么实现这个功能？

Answer 1

先定义一个move函数，在move函数里判断页面是往上还是往下滚动，往下的时候，导航条往左移动，页面往上滚动， 导航条往右·····

Answer 2

在 move() 这个函数中创一个导航栏左右滚动距离的参数，然后根据这个参数来控制导航栏左右滚动

Answer 3

或者可以通过滚动定位对应的元素，然后导航进行定位移动？

Answer 4

window.onscroll = function (e) {}在滚动事件里写就行了吧，想省事的话推荐你用swiper插件，回调函数多的一批

Answer 5

保存所有内容区块的高度 监听滚动 当 某一区块 在屏幕范围内 则找出当前区块的索引，对应着把 导航栏相同索引的元素点亮 或者滚动到屏幕中 就好了