我有一个页面,其中包含链接到页面相应部分的锚点.我想知道是否有人对如何在点击链接时切换锚链接的类以及窗口/页面使用jQuery滚动到适当的div时有任何建议？
<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或单击一个锚点时,锚点链接的类将切换.因此,如果单击#section 1锚点或页面滚动到#section1 div,则会将一个类添加到section1锚点链接.如果是第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");
}
});
});
同样,这只是一个简单的例子.有了您的更多详细信息,我可以给出更详细的答案.
