我有一个用于某种投资组合的单页网站。在这个网站上,我在顶部有一个带有链接的菜单,使用 # 作为链接将访问者带到页面的选定部分。
我希望它做到这一点,如果您位于(站点顶部),“主页”链接会将 css 类更改为 a.menuActive,从而更改菜单按钮的颜色。因此,当您单击它或只是简单地滚动到该部分时,它会发生变化。与其他链接相同。我怎样才能做到这一点?可能需要一种脚本感应用户在页面上的位置。
最佳答案
您可以使用 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
}
希望这对您有所帮助。
关于jquery - 将菜单链接类更改为在单页网站上处于事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41018824/