- 服饰
- 美妆
- 手机
- 家电
- 数码
- 运动
- 居家
- 母婴
- 食品
- 图书
- 服务
body,ul,li { padding:0; margin:0; } li { list-style:none; } #floorNav { display:none; position:fixed; top:100px; left:50px; width:32px; border:1px solid #CECECE; } #floorNav li { position:relative; width:32px; height:32px; border-bottom:1px solid #CECECE; text-align:center; line-height:32px; font-size:12px; } #floorNav span { display:none; position:absolute; top:0; left:0; width:32px; height:32px; background:red; color:white; } #floorNav li:hover span,#floorNav li.hover span { display:block; } #floorNav li:last-child { background:red; color:white; border-bottom:none; } #header,#footer { width:1000px; height:1000px; background:darkgoldenrod; margin:0 auto; } #content { }#content li { width:1000px; height:600px; margin:0 auto; font-size:40px; text-align:center; line-height:600px; }
因为两个操作的相互影响,在点击某一个楼层时,滚动条滚动的事件也在触发,就会出现如果此时在1楼,再点击6楼会让1到5楼全部走一遍,解决这个问题,我们在一开始定义一个flag为一个开关,默认为true,为true时滚动事件发生,再点击楼层数显示对应部分时,开关为false,滚动事件停止,给楼层数添加class名改变样式,但是在点击楼层动态效果显示后的animate的回调函数里让开关再次打开,为true,不影响滚动条的再次滚动