Question

因此，每当我点击观看时，它都会转到带有视频的div，但是如果我点击导航栏上的任何其他链接，它有时会突出显示活动链接，并且它始终是错误的链接。例如，如果我点击about，它将突出显示链接。有人可以帮助我突出显示我目前所处的正确div吗？

这是我到目前为止所拥有的。

$(window).scroll(function () {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('.container div').each(function (i) {
            if ($(this).position().top <= windscroll - 20) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });
    } else {
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }`enter code here`

}).scroll();

Answer 1

我想指出（至少在你的小提琴中）“赞助商”div在div.container的之外，因此它可能对赞助商不起作用（例如，如果您在“赞助商”之后添加更多部分），即使现在偶然发生，您可能会在将来遇到其他意外问题。

因此，您需要为代码（非意外）正常工作所做的是：

将“赞助商”div放入div.container。

变化：
$('.container div').each(function (i) {到
$('.container > div').each(function (i) {

变化：
if ($(this).position().top <= windscroll + 20) {到
if ($(this).position().top <= windscroll + 34) {，
因为这是您在第4行（scrollTop）中设置的scrollPoint = $('...').offset().top - 34偏移量。

Working demo 可以在这里找到。

修改：您可能想要解决的最后一种情况是，当最后一个部分的高度小于当前窗口高度时，scrollTop无法到达最后一个部分的position().top。在这种情况下，当用户一直滚动到底部时，高亮显示导航栏中的最后一个元素仍然是有意义的。这可以通过这一小小的补充来实现：

$(window).scroll(function () { ... var fromBottom = $(document).height() - ($(window).scrollTop() + $(window).height()); if (fromBottom == 0) { // <-- scrolled to the bottom $('nav a.active').removeClass('active'); $('nav a:last').addClass('active'); } else if ...

（ working demo 已更新，以说明这一点。）

（注意：与当前问题无关，但您可能希望将代码中的</br>替换为<br/>：））

Answer 2

尝试定位.container div的直接子项而不是每个后代，并且您需要将i的值增加1，因为它基于0：

$('.container > div').each(function (i) {
    var index = i + 1;
    if ($(this).position().top <= windscroll - 20) {
        $('nav a.active').removeClass('active');
        $('nav a').eq(index).addClass('active');
    }
});

<强> Updated Fiddle

jquery滚动，更改导航活动类，因为页面滚动搞乱，并使错误的链接活动？

2 个答案: