Question

JSFiddle的Gaurav Kalyan在Chrome中效果很好，但是在Safari和Firefox中，它激活了错误的菜单项。与其突出显示单击的菜单项，不如突出显示之前的菜单项。因此，例如，如果单击“ Punkt 4”，则将突出显示“ Punkt 3”。我无法解决此问题。有人可以帮忙吗？我已经尝试解决了两个星期。

HTML

    <section id="main">
    <div class="target" id="1">TARGET 1</div>
    <div class="target" id="2">TARGET 2</div>
    <div class="target" id="3">TARGET 3</div>
    <div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
    <nav>
        <a href="#1" class="active">Punkt 1</a>
        <a href="#2">Punkt 2</a>
        <a href="#3">Punkt 3</a>
        <a href="#4">Punkt 4</a>
    </nav>
</aside>

CSS

    * {
    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;
}

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');
        }
    });
});

Answer 1

如果视口高度（浏览器窗口的内部高度）小于等于400像素，则可以正常工作。这是因为当您单击a元素中的nav链接时，其中href为#4时，默认浏览器行为开始，而带有{{1 }}滚动到顶部（尽可能多）。

当视口的高度等于或小于要滚动到的元素的高度时，则触发id="4"处理函数时，scroll条件的值为true，因为if($(window).scrollTop() >= $(this).offset().top)将完全等于scrollTop格的offset().top。

但是，当视口大于内容div（在您的情况下，大于400像素）时，当浏览器尝试将最后一个div滚动到视图中时，它可以完全这样做，同时仍显示前一个div下半部分的一部分。这意味着第3个div将通过滚动处理程序#4检查，而不是第4个。（最后一个div的偏移顶部将不是<=窗口的scrollTop）。

那有什么解决方案？

我要确保每个目标div至少与视口具有相同的高度。您可以使用if（视口高度的100％）在现代浏览器中实现此目的。这意味着当最后一个滚动到视图中时，它将完全填满视口，并且正确的div将正确通过您的min-height: 100vh;逻辑检查。

See here for a working fork.

奖金提示

您可以采取许多措施来提高此代码的性能。缓存jQuery变量的创建，避免在每个滚动事件上重复进行4次（这可能经常发生），等等。暂时可以，但是以后可能会成为瓶颈。

在页面滚动div时突出显示活动菜单项（侧栏滚动菜单）

1 个答案:

那有什么解决方案？

奖金提示