gpt4 book ai didi

jquery - 滚动经过 anchor div 时向 anchor 链接添加类 - jquery

转载 作者:行者123 更新时间:2023-12-01 07:20:56 26 4
gpt4 key购买 nike

我有一个页面,其中包含链接到页面适当部分的 anchor 。我想知道是否有人对如何在单击链接时以及当窗口/页面使用 jQuery 滚动到适当的 div 时切换 anchor 链接的类有任何建议?

例如,有 3 个 anchor 链接链接到 3 个部分:

<ul>
<li><a href="#section1">Section 1</li>
<li><a href="#section2">Section 2</li>
<li><a href="#section3">Section 3</li>
</ul>

然后有 3 个部分:

<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

我想要完成的是,当页面滚动到其中一个 div 或单击 anchor 时, anchor 链接的类将会切换。因此,如果单击#section 1 anchor 或页面滚动到#section1 div,则会将一个类添加到section1 anchor 链接。如果是第 2 节,则 #section2 链接将接收该类,而section1 链接将删除该类,依此类推。

我想我可能需要一种方法来跟踪每个部分 div 的位置,然后在适当的链接上切换类,但我不太确定从哪里开始。

预先感谢您的任何帮助或建议。

最佳答案

我建议找到每个部分的总高度。我假设每个部分之间也没有休息。然后使用 jQuery 来确定窗口位置。当窗口位置达到一定值时,进行类切换。希望这只能通过滚动来完成,因此当您单击链接时,它将滚动,并且前面描述的函数可以运行并为您更改类。

这是一些伪代码

$(document).ready(function(){
var section1Height = $('#section1').height();
var section2Height = $('#section2').height();
var section3Height = $('#section3').height();

$(window).scroll(function() {
var winTop = $(window).scrollTop();
if(winTop >= section1Height && winTop <= section2Height){
$('#section1').addClass("newClass").not().removeClass("newClass");
} else if(winTop >= section2Height && winTop <= section3Height){
$('#section2').addClass("newClass").not().removeClass("newClass");
} else if(winTop >= section3Height){
$('#section3').addClass("newClass").not().removeClass("newClass");
}
});
});

同样,这只是一个简单的示例。如果您提供更多详细信息,我可以给出更详细的答案。

关于jquery - 滚动经过 anchor div 时向 anchor 链接添加类 - jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13864785/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com