jquery - 将菜单链接类更改为在单页网站上处于事件状态

Question

我有一个用于某种投资组合的单页网站。在这个网站上，我在顶部有一个带有链接的菜单，使用 # 作为链接将访问者带到页面的选定部分。

我希望它做到这一点，如果您位于(站点顶部)，“主页”链接会将 css 类更改为 a.menuActive，从而更改菜单按钮的颜色。因此，当您单击它或只是简单地滚动到该部分时，它会发生变化。与其他链接相同。我怎样才能做到这一点？可能需要一种脚本感应用户在页面上的位置。

Answer 1

您可以使用 jQuerys .scroll() 方法。

$( window ).scroll(function() {
    // access the current vertical position of the scrollbar with .scrollTop()
    if($(document).scrollTop() == 0){
        // scrolled to top of page --> change home link css 
    }
});

您可以通过插入链接到 jQuery 文件的脚本标记来使用 jquery(必须在您在 javascript 中使用 jQuery 之前)。你可以使用 CDN或 download jQuery并放入你的元素中。

你可以像这样改变类(我没有看到你的代码所以你必须改变一个或另一个)

// remove class 'active' from all elements with class 'fake-link'
$('.fake-link').removeClass('active');

// add class 'active' of the element with id 'fake-link-home'
$('#fake-link-home').addClass('active');

要更改主页链接以外的其他链接，您可以尝试这样的操作:

if($(document).scrollTop() > 50 && $(document).scrollTop() < 200){
    // change class of some link
} else if ($(document).scrollTop() > 200 && $(document).scrollTop() < 400){
    // change class of other link
}

希望这对您有所帮助。