将菜单 - 链接类更改为一页网站上的活动

Question

我有一个一页网站，用于一种投资组合。在此站点上，我在顶部有一个菜单，其中链接仅将访问者放在页面的选定部分。

我希望它做到这一点，因此，如果您在网站（顶部）"家庭"链接将CSS类更改为a.menuactive，从而改变了Menubutton的颜色。因此，当您单击它或只是滚动到该部分时，它会更改。与其他链接相同。我怎样才能做到这一点？可能需要某种脚本感应用户在页面上的位置。

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或下载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
}

希望这会有所帮助。