Javascript 当滚动到组件可见时，如何更改导航栏上的活动选项卡？

我有一个带有多个选项卡的导航栏，我可以单击它，它将我滚动到组件（scrollToComponent），它还将该选项卡设置为活动选项卡

我还想做oposite，滚动，当一个组件可见时，它应该将相应的选项卡标记为活动选项卡

我发现，这正好说明了我需要什么，但它使用Jquery，它滚动到的项不是组件，它们都具有相同的高度

$(document).ready(function () {
$(document).on("scroll", onScroll);

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('#menu-center ul li a').removeClass("active");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
});

$（文档）.ready（函数（）{
$（文档）.on（“滚动”，onScroll）；
函数onScroll（事件）{
var scrollPos=$（document.scrollTop（）；
$（'#菜单中心a'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（“#菜单中心ul li a”）.removeClass（“活动”）；
currLink.addClass（“活动”）；
}
否则{
currLink.removeClass（“活动”）；
}
});

自我回复，因为这对未来的人很有用：

我举了一个例子

它有一个自定义钩子，让您知道元素是否可见，然后您必须比较哪个元素位于顶部，这样您就可以决定要将哪个选项卡设置为活动选项卡