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?
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>
Then there are the 3 sections:
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
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.
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.