滚动超过锚点div时将类添加到锚点链接-jQuery [英] Add class to anchor link when scrolling past anchor div - jquery

问题描述

我有一个页面，该页面的锚点链接到页面的相应部分.我想知道是否有人对单击链接时以及如何在使用jQuery的窗口/页面滚动到适当的div时如何切换锚链接的类有任何建议?

I have a page that has anchors which link to appropriate sections of a page. I am wondering if anyone has any advice on how I may toggle the class of the anchor link when the link is clicked and also when the window/page scrolls to appropriate div using jQuery?

例如，有3个锚链接链接到3个部分:

For example, there are 3 anchor links which link to the 3 sections:

<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，则将向class1锚点链接添加一个类.如果是第2节，则#section2链接将接收该类，而section1链接将删除该类，依此类推.

What I would like to accomplish is when the page scrolls to one of the divs or an anchor is clicked the class of the anchor link would toggle. So if the #section 1 anchor is clicked or the page scrolls to the #section1 div, a class would be added to the section1 anchor link. If section 2, then #section2 link would receive the class and section1 link would have the class removed and so on.

我认为我可能需要一种方法来跟踪每个小节div的位置，然后在适当的链接上切换类，但是我不太确定从哪里开始.

I think I may need a way to track the positioning of each section div and to then toggle the class on the appropriate link, but I am not too sure where to begin.

在此先感谢您的帮助或建议.

Thanks in advance for any help or advice.

推荐答案

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

I would suggest finding the total height of each section. I am assuming there are no breaks in between each section as well. Then use jQuery to determine the window position. When the window position hits a certain value, make the class switch. Hopefully this can be done only with scrolling, so when you click on a link, it will scroll and the previously described function can run and change the classes for you.

这是一些伪代码

$(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");
        }
    });
});

同样，这只是一个简单的例子.有关您的更多详细信息，我可以给出更详细的答案.

Again, this is just a quick example. With more details on your part, I can give a more detailed answer.

这篇关于滚动超过锚点div时将类添加到锚点链接-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！