动画逻辑

京东floor

  • 滚动楼层对应变化
  • 点击楼层对应内容变化

    demo见offer-JDfloor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onscroll=function(){
if(scrollTop > 每个楼层对应的offset().top)
== 当前最后一个符合的有红色背景.red{color:red}
给每个li加上一个 data-top自定义属性表示div对应的offsettop
}
$('li').click(function(){
window.onscroll=null; 制空滚动条效果
move(target) //target代表当前点击的data-top
_move();
function _move(){
clearInterval(_move);
if(scrolltop>target){ 向上运动
边界判断 唤醒window.onscroll= ...fn
document.body.scrollTop-step;
return ;
}else if(scrolltop<target){ 向下运动
同上
}else{}
window.setInterval(_move,10)
}
})