jQuery 滚动，活动菜单突出显示答案

【问题标题】：jQuery scrolling, active menu highlightingjQuery 滚动，活动菜单突出显示
【发布时间】：2012-04-06 01:53:12
【问题描述】：

我的 jQuery 滚动脚本有一些问题。我已经成功地在我的单页网站顶部创建了一个固定菜单。菜单项在 jquery 页面中滚动到右侧区域，并且活动菜单项被突出显示。

问题是我想在用户手动滚动时突出显示菜单项。我认为下面的脚本可以解决这个问题，但它不起作用。

我做错了什么？

if($('#contact').offset() < $(document).scrollTop()) { // #contact is the element who one of the menu items scroll to.

    $('.link-contact').css({ // The menu item
        'background' : 'url(wp-content/themes/theme/images/menu.bg.png)',
        'color' : '#999'

    });
}

【问题讨论】：

标签： jquery css scroll

【解决方案1】：

可能是您的 if 语句仅在页面加载时触发一次。
您是否尝试过将其放入滚动事件中？

$(window).scroll(function() {
    if($('#contact').offset().top < $(document).scrollTop()) {
        ...
    }
});

这应该可以解决问题。

【讨论】：

【解决方案2】：

.offset() 返回一个包含 top 和 left 属性的对象。

在您的情况下，$('#contact').offset() 返回一个对象，因此您的 if 语句将始终为 false。

也就是说，像这样访问顶级属性值：$('#contact').offset().top

【讨论】：