Sticky Header Faktor 22

Anchor link met een sticky header – de makkelijkste oplossing

Regelematig struggelen mensen met een anchor link binnen een pagina met een sticky header: het anchor target valt achter het sticky menu. In onderstaande situatie bijvoorbeeld:

Dit is de code achter de ‘Offerteaanvraag’ button (afbeelding #1.1) bovenaan de pagina:

<a href=”#offerte”>Offerteaanvraag</a>

Deze link moet springen naar het onderdeel ‘Offerteaanvraag’ onderaan de pagina. We identificeren de anchor link met de volgende code die we net voor de titel ‘Vrijblijvende Offerteaanvraag’ plaatsen:

<a name=”offerte”></a>

Wat we willen bereiken is dat de link netjes naar de titel ‘Vrijblijvende Offertepagina’ springt (afbeelding #1.2). Je browser houdt echter geen rekening met de sticky header, wat ervoor zorgt dat de tekst ‘Vrijblijvende Offerteaanvraag’ precies bovenaan de bovenzijde van je browser komt, en dus precies achter de sticky header valt (afbeelding #1.3)

Afbeelding 1.1, 1.2 & 1.3

Faktor 22 ging op zoek naar de beste en meest eenvoudige oplossing voor dit probleem, zodat jij (en wijzelf) de volgende keer niet meer op zoek hoeven.

Stap 1 – meten is weten

Meet de hoogte van je sticky header in pixels op. We moeten namelijk weten hoeveel ruimte we boven je anchor link moeten gaan toevoegen. De pixels achterhalen? Dit doe je met tools als Photoshop, maar er zijn ook diverse handige Google Chrome extensies beschikbaar.

Bij het voorbeeld dat we in dit artikel gebruiken is de hoogte van de sticky header 125px.

Stap 2 – voeg code toe aan je custom.css bestand

Voeg de onderstaande code toe aan je custom.css bestand. Bij de meeste thema’s kun je dit via de thema instellingen beheren. Bij ‘top’ vullen we de waarde in die we bij stap 1 hebben gemeten, in ons geval dus ‘125px’.

a.anchor {
display:block;
position:relative;
top: -125px;
visibility: hidden;
}

Stap 3 – geef je anchor de juiste HTML class

Ga terug naar de betreffende pagina of artikel en scroll naar de anchor name. Open de broncode van je artikel door rechtsboven in de teksteditor op ‘Tekst’ te klikken. We gaan de class die we bij stap 2 hebben gedefineerd toevoegen aan de anchor name. Dit doen we als volgt:

Het origineel: <a name=”offerte”></a>

Dit wijzigen we naar: <a name=”offerte” class=”anchor”></a>

Opslaan, cache legen en refreinen maar… het resultaat: