老师有关楼层导航条效果实现的问题

这一段不是特别理解，老师可以讲解一下吗，还有最终实现效果有点问题（在导航条显示选中）

<!DOCTYPE html>

<html>

<head>

* {

margin: 0;

padding: 0;

}

.content-part {

width: 1000px;

margin: 0px auto;

margin-bottom: 30px;

background-color: #ccc;

font-size: 50px;

}

.floornav {

width: 80px;

height: 200px;

position: fixed;

top: 50%;

margin-top: -100px;

right: 0px;

background-color: rgba(0, 0, 0, .6);

color: white;

}

.floornav ul {

width: 80px;

height: 200px;

list-style: none;

}

.floornav li {

width: 80px;

height: 40px;

line-height: 40px;

text-align: center;

/*小手状*/

cursor: pointer;

}

.floornav ul li.current {

background-color: rgba(0,0,0,.3);

color: white;

}

</style>

</head>

<body>

</ul>

</nav>

科技栏目

</section>

体育栏目

</section>

新闻栏目

</section>

娱乐栏目

</section>

视频栏目

</section>

var list = document.getElementById('list');

var contentParts = document.querySelectorAll('.content-part');

var lis = document.querySelectorAll('#list li');

// 使用事件委托给li添加监听

list.onclick = function(e) {

//e.target.tagName.toLowerCase()获取到点击的标签名，并转换成小写

if(e.target.tagName.toLowerCase() == 'li') {

//getAttribute表示得到标签身上的某个属性值

var n = e.target.getAttribute('data-n');

//可以用属性选择器(就是方括号选择器)来寻找带有相同data-n的content-part

var contentPart = document.querySelector('.content-part[data-n=' + n + ']');

//让页面的卷动自动成为这个盒子的offsetTop值

document.documentElement.scrollTop = contentPart.offsetTop;

}

// 在页面加载好之后，将所有的content-part盒子的offsetTop值推入数组

var offsetTopArr = [];

// 遍历所有的contentPart，将它们的净位置推入数组

for(var i = 0; i < contentParts.length; i++) {

offsetTopArr.push(contentParts[i].offsetTop);

}

// 为了最后一项可以方便比较，我们可以推入一个无穷大

offsetTopArr.push(Infinity);

console.log(offsetTopArr);

// 当前所在楼层

var nowfloor = -1;

// 窗口的卷动

window.onscroll = function() {

// 得到当前的窗口卷动值

var scrollTop = document.documentElement.scrollTop;

// 遍历offsetTopArr数组，看看当前的scrollTop值在哪两个楼层之间

for(var i = 0; i < offsetTopArr.length; i++) {

if(scrollTop >= offsetTopArr[i] && scrollTop < offsetTopArr[i + 1]) {

break;

}

// 退出循环的时候，i是几，就表示当前楼层是几

// 如果当前所在楼层，不是i，表示换楼了

if(nowfloor != i) {

console.log(i);

// 让全局变量改变为这个楼层号

nowfloor = i;

// 设置下标为i的项有cur

for(var j = 0; j < lis.length; j++) {

if(j == i) {

lis[j].className = 'current';

} else {

lis[j].className = '';

}

};

</script>

</body>

</html>

lcy_18 2021-04-09

源自：BOM基础 2-15 BOM特效开发（2）

收起

1回答

卡布琦诺回答被采纳获得+3积分 2021-04-09 17:12:18

同学你好，关于同学的问题解答如下

1、老师测试了同学的代码，效果是能够实现的，如图

同学说的导航条选中有问题指的是左侧楼层模块与右侧导航不能精准判断么？该问题产生的原因是因为左侧的楼层模块高度不一致，而在js判断卷动到哪里的时候，判断的是在那两个楼层模块之间导致的。因为不是确切的指定了卷动值，所以这一现象是正常现象呢。

2、关于同学说的对代码不理解，老师帮你写在了代码注释里面

希望可以帮到你，如果还有疑问，可以再次提问。祝学习愉快！

收起回答

lcy_18 提问者 #1

那左侧楼层模块与右侧导航要怎样才能进行精准判断呢？

2021-04-09 17:44:00

同学你好，有一种比较精准的实现方案如下：

1、首先分析实现思路

（1）因为是由滚动触发的楼层判断，所以肯定离不开onscroll事件。

（2）要获取每个楼层顶端距离视窗顶部的距离，随着滚动条往下滚动，此距离会不断缩小，当接近到某个距离时我们判定某个楼层模块进入可视区域（当然其它楼层都满足此判定）。

2、实现思路图示

为了方便理解，假设楼层模块一顶端距离视窗顶端为0时，此时判定楼层一模块进入可视区域，即楼层导航中第一个按钮应该被点亮。

此时楼层模块一距离顶端已经为0，可以得出当楼层模块的offsetTop = scrollTop时，我们认定

楼层模块一进入可视区域。而当楼层模块二进去可视区时，楼层模块二的offsetTop也等于滚动条的距离，此时楼层模块二自然会进入可视区域。

现在得到了判断各个楼层模块进入可视区域的条件，如果某个楼层模块的offsetTop属性的值小于等于滚动条距离时（如果用等于条件过于苛刻，很难刚好滚动到这个距离点上），高亮显示右侧相对应的导航项。

为了让效果更加自然，不能真的让某个楼层模块紧贴可视区顶部时才判定它满足条件，而是提前达到某个距离就判定满足，所以真正的条件应该是offsetTop - 100（这个数字看自己感觉进行调整） <= scrollTop，然后利用满足楼层的索引来控制样式，而后者满足条件的索引始终会覆盖前面的索引，所以右侧高亮显示的导航项只有一个。

3、代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .floor>div {
        height: 900px;
        line-height: 900px;
        text-align: center;
        color: #fff;
        font-size: 40px;
    }
    .floorNav {
        width: 100px;
        height: 200px;
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: #ddd;
    }
    .floorNav>li {
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
    }
    .active {
        background: #e4393c;
        color: #fff;
    }
    </style>
</head>
<body>
    <div class="floor">
        <div style="background: #ffb6b9">楼层模块一</div>
        <div style="background: #fae3d9">楼层模块二</div>
        <div style="background: #bbded6">楼层模块三</div>
        <div style="background: #8ac6d1">楼层模块四</div>
        <div style="background: #fff1ac">楼层模块五</div>
    </div>
    <ul class="floorNav">
        <li>导航一</li>
        <li>导航二</li>
        <li>导航三</li>
        <li>导航四</li>
        <li>导航五</li>
    </ul>
    <script>
    //获取楼层
    var floors = document.querySelectorAll(".floor>div");
    //获取楼层导航
    var floorNavs = document.querySelectorAll(".floorNav>li");
    //滚动监听
    window.onscroll = function() {
        //获取滚动条高度（并且兼容ie）
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //符合点亮条件的楼层索引
        var activeIndex;
        //楼层导航图标点亮控制
        floors.forEach((floor, index) => {
            //检查各楼层顶端距离视窗顶端距离，如果满足条件则修改楼层图标
            floor.offsetTop - 100 <= scrollTop ? activeIndex = index : null;
        });
        //根据索引数设置楼层样式
        floorNavs.forEach((nav, index) => {
            index === activeIndex ? nav.classList.add('active') : nav.classList.remove('active');
        });
    };
    </script>
</body>
</html>