有问题请教老师
来源：5-3 标识楼层号和抵达指定楼层
粉墨登场
2021-01-30 14:03:31
问题描述：
老师你好，我疑惑的是这段代码。这段代码中判断楼层是否出现在可视区域内，没有出现时num为-1，电梯导航就隐藏。但是当第一个楼层的上边框超过可视区域一半的高度时，num = index - 1；第一个楼层index是0，再 - 1 = -1。那么电梯导航应该隐藏起来的，但是实际效果是不仅没有隐藏而且第一个电梯导航项的样式还变成了active样式。请老师指点一下。
相关代码：
// 8. 电梯导航楼层的按标识楼层号和抵达指定楼层功能
floor.whichFloor = function() {
// 先定义一个表示当前显示在可视区域内的楼层的索引值num，初始化为-1，表示没有任何一个楼层出现在可视区域内。这时应该将整个电梯楼层导航隐藏起来
var num = -1;
// 接着循环所有楼层，一共五层
floor.$floor.each(function(index, ele) {
// 获取各个楼层的上边框距离页面顶部的距离，该距离保存在floor对象内的floorData属性中，index表示各个楼层的索引
var floorData = floor.floorData[index];
// 接着让num等于当前循环的楼层的索引，
num = index;
// 判断，如果楼层上边框距离页面顶部的距离大于可视区域一般的高度时，表示该楼层出现在可视区域的中间，这时就可以让该楼层号显示出来了。
if(floorData.offsetTop > $win.scrollTop() + $win.height() / 2) {
// num就等于当前楼层的索引减 1
num = index - 1;
// 退出循环，已经找到了当前显示在可视区域内的楼层号
return false;
}
})
// 最后返回当前显示在可视区域内的楼层号
return num;
}
2回答
-
好帮手慕夭夭
2021-01-30
同学你好，你的理解是对的哦，很棒！继续加油，祝学习愉快~
0 -
粉墨登场
提问者
2021-01-30
噢老师，我明白这段代码了。逻辑是这样的：当没有任何楼层的上边框超过可视区域一半的时候，这时第一个楼层就满足了这个条件：floorData.offsetTop > $win.scrollTop() + $win.height() / 2。
接着进入到判断里面，num就等于第一个楼层的index- 1：num = 0 - 1 = -1; 退出循环、退出函数将num返回出来。因此楼层导航是不会出现的(判断电梯导航出现的表达式满足num === -1)。接着滚动条滚动、滚动，当第一个楼层上边框超过可视区域一半了，不满足判断的条件了，因为这时floorData.offsetTop是小于$win.scrollTop() + $win.height() / 2的，那么开始下一个循环，下一次循环的是第二个楼层，这时第二个楼层是满足条件的因此进入到判断里面，num就等于第二个楼层的索引减1，就是1 - 1 = 0， 将num返回出来，因此楼层导航显示出来了（0 !== -1），并且楼层导航的第一个项样式变为active，后面的楼层也是这个道理。简单点说就是只要楼层的上边框超过了可视区域一半的内容，该楼层对应的楼层导航项样式就会变为active样式。 滚动到最后时，所有楼层的上边框都超过可视区域一半了，不满足判断出现的条件，那楼层导航会直接隐藏起来。因此在判断之前先将当前被循环的楼层的索引假设为就是在可视区域显示的楼层：num = index; 这一句表达式就是为了滚动到最后一层时判断错误的纠正。一开始我认为这句表达式不用写的，但是如果去掉了，num = -1，楼层导航会直接隐藏起来。请老师仔细看一下，逻辑应该是这样没错的吧？
0
相似问题