Tilføj automatisk class til sidemenu ved scroll
Hej,Jeg har på min webside en fixed sidemenu, som følger med når brugerne scroller ned på siden.
Sidemenuen benytter følgende markup:
<ul>
<li><a class="arrow-hover" href="#sektion1">Sektion 1</a></li>
<li><a class="arrow-hover" href="#sektion2">Sektion 2</a></li>
<li><a class="arrow-hover" href="#sektion3">Sektion 3</a></li>
</ul>
Og mit indhold i venstrekolonnen benytter følgende:
<h2 id="sektion1">Sektion 1</h2>
<p>Tekst</p>
<h2 id="sektion2">Sektion 2</h2>
<p>Tekst</p>
<h2 id="sektion3">Sektion 3</h2>
<p>Tekst</p>
Jeg søger et jQuery script, der automatisk vedhæfter current som en class til det link i sidemenuen, når den tilhørende sektion (H2 header) fra venstrekolonnen er i brugerens viewport.
Så hvis brugeren f.eks. scroller ned til:
<h2 id="sektion1">Sektion 1</h2>
Så tilføres current som en class til følgende link:
<li><a class="arrow-hover current" href="#sektion1">Sektion 1</a></li>
Og når brugeren så scroller videre og sektionen ikke længere er i brugerens viewport, så fjernes "current" fra linket igen:
<li><a class="arrow-hover" href="#sektion1">Sektion 1</a></li>
---
Jeg fandt et meget godt eksempel, der viser hvad det er jeg søger på https://codemyui.com/sticky-sidebar-navigation-on-scroll/ - men med mine meget begrænsede kodeegenskaber, så kunne jeg ikke få det til at virke med min sidemenu.
Håber der er en som kan hjælpe.