Avatar billede Kast20 Seniormester
04. april 2020 - 20:39 Der er 2 kommentarer og
1 løsning

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.
Avatar billede Kast20 Seniormester
04. april 2020 - 20:42 #1
For lidt mere kontrol over hvor scriptet skal slå igennem, så kan jeg også indramme sidemenuen i en <nav>-container, så markup bliver:

<nav>
<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>
</nav>
Avatar billede nopsen Ekspert
04. april 2020 - 20:48 #2
du reagerer jo ikke på den hjælp du får

https://www.computerworld.dk/eksperten/profil/219913?last=1002967
Avatar billede Kast20 Seniormester
07. april 2020 - 16:03 #3
Lukker.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester