Jquery电梯导航案例

 

效果图

 

 

 

1. 当我门滚动到今日推荐模块，就让电梯导航显示出来

 

 

 当滚到recommend就显示

 

 那么实现的jQuery代码是：

 

 

 

 

 

2.第二个模块，点击电梯导航页面可以滚动到相应内容区域

要对应

 

 

 

3.核心算法：因为电梯导航模块和内容区模块一一对应的

 

 

 

 

 

4.当我们点击电梯模块某个小模块，就可以拿到当前小模块的索引号

5. 就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top

 

 

 

6. 刷新页面消失，应该让加载就调用函数

 

 

 

7.点击添加类名，姐妹移除类名

 

 

8.  当我们滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类。

9.触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。

10. 判断的条件：被卷去的头部大于等于内容区域里面每个模块的offset().top

11.就利用这个索引号找到相应的电梯导航小li添加类

 

 

 

12.节流阀（互斥锁）

13.当我们点击小li，此时不需要执行页面滚动事件里面的li的背景选择，添加current