Javascript 将活动菜单项高亮显示为页面滚动divs（侧栏滚动菜单）

这项功能在Chrome上运行良好，但在Safari和Firefox中，它会激活错误的菜单项。它不会高亮显示单击的菜单项，而是在单击之前高亮显示菜单项。例如，如果你点击“Punkt4”，Punkt3就会突出显示。我还没能解决这个问题。有人能帮忙吗？我已经试着解决这个问题两周了

HTML

JavaScript

    $('#nav nav a').on('click', function(event) {
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
});

$(window).on('scroll', function() {
    $('.target').each(function() {
        if($(window).scrollTop() >= $(this).offset().top) {
            var id = $(this).attr('id');
            $('#nav nav a').removeClass('active');
            $('#nav nav a[href=#'+ id +']').addClass('active');
        }
    });
});

---

如果视口高度（浏览器窗口的内部高度）为=$（This）.offset（）.top）条件的计算结果为true，则此操作效果良好，因为

滚动顶

将完全等于

#4

div的

offset（）.top

---

但是，当视口大于内容div（在您的示例中为>400px）时，当浏览器尝试将最后一个div滚动到视图中时，它可以完全这样做，同时仍显示前一个div下半部分的一部分。这意味着第三个div将通过滚动处理程序

if

检查，而不是第四个。（在Firefox 61.0上，最后一个div顶部的偏移量对我来说不太合适。你可能需要使用

Ctrl+F5

刷新页面@Mohamed Yousef有点欺骗性——它在顶部菜单项上工作，但是，例如，如果你按“Punkt 4”，Punkt 3会突出显示。（我在Mac上运行的是Firefox 65.0.1。）非常感谢@GregL提供的这些指针。我已经尝试将“最小高度：100vh”合并到我一直在处理的一个文件中（平滑滚动）。虽然“最小高度：100vh”已经解决了最紧迫的问题，但我在Safari和移动浏览器中遇到了进一步的问题。不过，非常感谢您的帮助。非常感谢。

    * {
    margin: 0;
    padding: 0;
}

#main {
    width: 75%;
    float: right;
}

#main div.target {
    background: #ccc;
    height: 400px;
}

#main div.target:nth-child(even) {
    background: #eee;
}

#nav {
    width: 25%;
    position: relative;
}

#nav nav {
    position: fixed;
    width: 25%;
}

#nav a {
    border-bottom: 1px solid #666;
    color: #333;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}

#nav a:hover, #nav a.active {
    background: #666;
    color: #fff;
}

    $('#nav nav a').on('click', function(event) {
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
});

$(window).on('scroll', function() {
    $('.target').each(function() {
        if($(window).scrollTop() >= $(this).offset().top) {
            var id = $(this).attr('id');
            $('#nav nav a').removeClass('active');
            $('#nav nav a[href=#'+ id +']').addClass('active');
        }
    });
});