Question

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

我希望它能够如此实现，如果你在（网站的顶部）“home”链接将css类更改为更改menubutton颜色的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
}

希望这会有所帮助。

在单页网站上将菜单链接类更改为活动

1 个答案: