Hjælp til CSS

Har du mulighed for at lægge current-klassen på li-elementet i stedet?

Jeg mener ikke du kan style et forfader-element til et element...

Hej - det er et javascript jeg har fundet et sted. Er ikke sikker på jeg kan tilpasse det så det sætter klassen på li-elementet. Jeg kan evt. dele scriptet hvis du vil have et kig.

Det ville da være en start :)

Super! :-)

Det ser således ud:

------

let mainNavLinks = document.querySelectorAll("#sidemenu ul li a");
let mainSections = document.querySelectorAll("section");

let lastId;
let cur = [];

window.addEventListener("scroll", event => {
  let fromTop = window.scrollY - 700;  // Top-margin

  mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash);

    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add("current");
    } else {
      link.classList.remove("current");
    }
  });
});

Jeg ville da prøve (quick and dirty) med:

    if (
        section.offsetTop <= fromTop &&
        section.offsetTop + section.offsetHeight > fromTop
    ) {
        link.parentElement.classList.add("current");
    } else {
        link.parentElement.classList.remove("current");
    }

Du bør naturligvis tjekke om parentElement er != null og om den er af typen LI (hvis ikke skal der måske søges videre i forfaderhierarkiet).

Eksemplet forudsætter at den umiddelbare forælder til linket er LI-elementet (som du har vist i din kode), men det ville nok være bedre, at tjekke det, end forvente det. Det er nok et temperamentsspørgsmål :)

Perfekt - det var lige hvad der skulle til og løsningen. Tusind tak for hjælpen. :-)

Nu kan jeg farve mit LI-element med:
#sidemenu li.current::before {color: #888 !important;}

Jeg bruger scriptet i en sidemenu, som så farver LI-elementet, når brugeren kommer ned til en bestemt <sektion> i indholdet som vist på https://css-tricks.com/sticky-smooth-active-nav/

Det eneste problem jeg har med scriptet er, at hvis min sidemenu først bliver vist meget langt nede på siden, fordi jeg har meget indhold før sidemenuen, så identificerer scriptet ikke den helt præcise lokation. I dette tilfælde sætter scriptet måske "current" klassen på et afsnit/li-element som først kommer senere i sidemenuen.

Det skifter altså ikke konsekvent så snart <section id="123">...</section> passerer toppen af browservinduet. På de fleste af mine sider er sidemenuen placeret højt oppe men på andre er det ikke helt optimalt. Har dog ingen idé om hvorfor det ikke kan identificere den helt rette scroll-lokation. :-)

Hvorfor trækker du de 700 fra window.scrollY?

Det gør Chris ikke :)