Javascript 集合中的元素被滚动时的操作

我有一个未知数量的区段块。 我使用这些自动生成的部分的标题来填充跟随滚动的“选项卡”容器（使用

sticky

position）

我需要的是，当我经过章节中包含的一个标题时，从“选项卡”栏中选择相同的标题，以获得类

“selected”

，从而指示用户所在的位置

但到目前为止我所做的只是部分地起作用。 下面是一个工作示例：

let titles=[]；
$。每个（$（'section>h3'），函数（）{
titles.push（$（this.offset（）.top）；
});
$（文档）.on（'mousewheel-DOMMouseScroll'，函数（e）{
让winscrollpos=$（窗口）.scrollTop（）；
$。每个（标题、功能（i、v）{
如果（winscrollpos>=v&&winscrollpos
.filler{
高度：800px；
}
.选定{
颜色：红色；
}
.标签{
背景色：#eee；
位置：粘性；
排名：0；
}
p{
宽度：200px
}
.标签h3{
显示：内联；
左边距：50像素；
}

标题1标题2标题3标题4
标题1
Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·利古拉·塞姆，狮子座元素，阿利奎姆·布兰迪·奥奇。Ut权杖拍卖人tincidunt。在dui eget nisl varius porttitor的Phasellus。发酵液是一种连续发酵液，不是最大的发酵液。8月1日怀孕的猫的交通工具。杜伊斯·乌兰科珀·马莱苏亚达·尼布。非枕叶型，如枕叶矢状菱形前叶。酒后驾车。在molestie libero，Proin nec tempus augue。酒后驾车和自由驾车

标题2
Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·利古拉·塞姆，狮子座元素，阿利奎姆·布兰迪·奥奇。Ut权杖拍卖人tincidunt。在dui eget nisl varius porttitor的Phasellus。发酵液是一种连续发酵液，不是最大的发酵液。8月1日怀孕的猫的交通工具。杜伊斯·乌兰科珀·马莱苏亚达·尼布。非枕叶型，如枕叶矢状菱形前叶。酒后驾车。在molestie libero，Proin nec tempus augue。酒后驾车和自由驾车

标题3
Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·利古拉·塞姆，狮子座元素，阿利奎姆·布兰迪·奥奇。Ut权杖拍卖人tincidunt。在dui eget nisl varius porttitor的Phasellus。发酵液是一种连续发酵液，不是最大的发酵液。8月1日怀孕的猫的交通工具。杜伊斯·乌兰科珀·马莱苏亚达·尼布。非枕叶型，如枕叶矢状菱形前叶。酒后驾车。在molestie libero，Proin nec tempus augue。酒后驾车和自由驾车

标题4
Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·利古拉·塞姆，狮子座元素，阿利奎姆·布兰迪·奥奇。Ut权杖拍卖人tincidunt。在dui eget nisl varius porttitor的Phasellus。发酵液是一种连续发酵液，不是最大的发酵液。8月1日怀孕的猫的交通工具。杜伊斯·乌兰科珀·马莱苏亚达·尼布。非枕叶型，如枕叶矢状菱形前叶。酒后驾车。在molestie libero，Proin nec tempus augue。酒后驾车和自由驾车

我对您的代码进行了以下修复：


add（'.selected'）。toggleClass（'selected'）
：以这种方式链接两个函数无法工作。这就是为什么你的标题在被选中时会闪烁的原因。我用这个版本的
我添加了另一个列表，
nextitlepos
，以便为每个标题存储下一个标题的位置。对于最后一个，您可以使用大于容器末端的任何值（我在这里使用了
Number.MAX\u value
以保持简单，但如果需要，您也可以使用容器末端。）
在HTML代码中，还有一个额外的
标记，它是空的。这一条阻碍了标题2的正确突出显示
编辑：我已经将事件
鼠标滚轮
替换为
滚动
（正如Shridhar Sharma在下面的评论中提到的-谢谢）


let titles=[]；
$。每个（$（'section>h3'），函数（）{
titles.push（$（this.offset（）.top）；
});
设nextitlepos=[]；
$。每个（标题、功能（i、v）{
如果（i！=0）{
下一推位（v）；
}
}); 
NEXTTTITLEPOS.push（数字最大值）；
$（文档）.on（'scroll-DOMMouseScroll'，函数（e）{
让winscrollpos=$（窗口）.scrollTop（）；
$。每个（标题、功能（i、v）{
设isSelected=winscrollpos>=v&&winscrollposh3.deco选项卡标题'）.eq（i）.toggleClass（'selected'，isSelected）；
});
});
.filler{
高度：800px；
}
.选定{
颜色：红色；
}
.标签{
背景色：#eee；
位置：粘性；
排名：0；
}
p{
宽度：200px
}
.标签h3{
显示：内联；
左边距：50像素；
}

标题1标题2标题3标题4
标题1
Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·利古拉·塞姆，狮子座元素，阿利奎姆·布兰迪·奥奇。Ut权杖拍卖人tincidunt。在dui eget nisl varius porttitor的Phasellus。发酵液是一种连续发酵液，不是最大的发酵液。8月1日怀孕的猫的交通工具。杜伊斯·乌兰科珀·马莱苏亚达·尼布。非枕叶型，如枕叶矢状菱形前叶。酒后驾车。在molestie libero，Proin nec tempus augue。酒后驾车和自由驾车

标题2
瞧