Sticky header met tonen/verbergen bij scrollen

Met deze snippet kun je (bijna) elke header op de pagina Sticky maken die zichzelf verbergt wanneer je naar beneden scrolt, maar weer opduikt wanneer je omhoog scrolt. En als bonus een stap-voor-stap handleiding over hoe je dit kunt implementeren in Oxygen Builder.

Johan de Jong

door Johan de Jong

Published: augustus 12, 2021
Last modified: december 13, 2021

Het is een eenvoudige, maar zeer fraaie manier om te voorkomen dat header ruimte inneemt die kan worden gebruikt voor het weergeven van de inhoud. Dit fragment bevat een klein stukje Javascript en een paar regels CSS, en in ruil daarvoor krijg je het volgende:

Als je naar de bron van het bovenstaande voorbeeld kijkt, lijkt het misschien veel om te verwerken, dus laten we het opsplitsen. En maak je geen zorgen over de HTML of LESS, de belangrijke onderdelen zijn slechts een enkele klasse in de HTML en een paar regels (gewone) CSS.

HTML

Dit is het gemakkelijkste deel; voeg een enkele Class toe aan het element dat je sticky wilt maken! Dat is alles, geen complexe HTML-structuur of de noodzaak om de website opnieuw te ontwerpen om een eenvoudig script zijn werk te laten doen.

<!-- <header> element -->
<header class="jd-sticky">
</header>

<!-- <div> element -->
<div class="jd-sticky">
</div>

<!-- <nav> element -->
<nav class="jd-sticky">
</nav>

Voeg .jd-sticky toe aan elk element dat je sticky wilt hebben en ga verder met de volgende stappen om het te laten werken.

CSS

De tweede stap is om een Class toe te voegen aan het element dat je sticky wilt maken, in dit geval de header.

/**
 * Sticky CSS
 */
/* add padding-top to match height of the header */
body {
    padding-top: 70px;
}
/* on mobile the header is twice as hight, and so should the padding be */
@media (max-width: 768px) {
    body {
        padding-top: 140px;
    }
}
/* make header fixed to the top */
.jd-sticky {
    position: fixed;
    top: 0;
    /* and a smooth transition, so it won't just pop in and out the screen */
    transition: top 700ms linear;
}

Er gebeuren hier twee dingen; eerst voegen we een padding-top toe aan de body, zodat er altijd wat ruimte is om de header weer te geven. De reden is vanwege het tweede deel van de CSS; we zorgen ervoor dat de header bovenaan de pagina blijft plakken met position:fixed, waardoor het hele element over de rest van de inhoud wordt geplaatst. Natuurlijk moet je de opvulling (zowel voor desktop als tablet/mobiel) wijzigen op basis van de grootte van je header-element.

Met alleen dit kleine CSS-fragment heb je al een Sticky header, maar we willen natuurlijk wat meer.

Javascript

De laatste stap is om wat javascript toe te voegen dat het tonen en verbergen van de Header afhandelt bij het op en neer scrollen of swipen op mobiel.

/**
 * Sticky JS
 */
/* set the element you want to make sticky */
const headerElem = document.querySelector('.jd-sticky');
/* set the offset on which the hide effect has to wait */
const scrollOffset = 200;

/* DO NOT MODIFY BELOW */
/* get the current page position */
let prevScrollpos = window.pageYOffset;

/* monitor when the page is being scrolled */
window.addEventListener('scroll', () => {
    /* check if the scroll offset is passed */
    if (window.pageYOffset > scrollOffset) {
        /* get the new page position after scrolling */
        let currentScrollPos = window.pageYOffset;
        /* check the new page position with the old position */
        if (prevScrollpos > currentScrollPos) {
            /* if scrolling UP, show the sticky element */
            headerElem.style.top = '0';
        } else {
            /* if scrolling DOWN, hide the sticky element */
            headerElem.style.top = '-100%';
        }
        /* set the page position, so it can be checked the next time */
        prevScrollpos = currentScrollPos; 
    }
});

Het Javascript is heel eenvoudig, maar zeer effectief. Het neemt het element dat moet worden beïnvloed, in dit geval .jd-sticky, en zal de bovenste positie veranderen afhankelijk van het scrollgedrag.

En dat is alles! Slechts een enkele klasse toegevoegd aan je HTML en een paar regels CSS en Javascript, en je hebt een eenvoudige Sticky header met scroll-effecten.

Oxygen

Aangezien we bij jacht.digital Marketing Oxygen Builder veel gebruiken, en weten dat het een beetje uitdagend kan zijn om voeg aangepaste stijlen en scripts toe, hier een stapsgewijze handleiding over hoe je het zelf kunt doen.

Het maakt niet uit hoe jouw huidige website eruitziet, dus in dit voorbeeld hebben we gewoon een van de standaardinstellingen in Oxygen Builder genomen. Het is belangrijk dat het hele blok, in dit geval de Header, als één geheel kan worden geselecteerd.

Net als bij de implementatie zonder Oxygen Builder, hoef je nu alleen nog de .jd-sticky-Class aan het header-element toe te voegen. Dit kan worden gedaan door het element uit de lijst Structuur te selecteren en de Classname handmatig in de rechterzijbalk toe te voegen. Zorg ervoor dat je geen breakpoints of state hebt geselecteerd, anders werkt het mogelijk alleen in die specifieke gevallen.

Nu is het tijd voor de CSS en Javascript, die eenvoudig met een codeblock kunnen worden toegevoegd. In dit voorbeeld hebben we de codeblock-component “ergens” in het header-element toegevoegd, zodat het gemakkelijker terug te vinden is. Maar zolang het altijd beschikbaar is wanneer je de header toont (dus overal in een sjabloon of herbruikbaar onderdeel dat samen met de header wordt getoond), komt het goed.

Hierin voegen we de CSS toe in ‘Advanced’ -> ‘CSS’ en brengen de wijzigingen aan waar nodig.

En we voegen het Javascript toe in ‘Advanced’ -> ‘JavaScript’.

Houd er rekening mee dat Oxygen Builder niet erg slim is als het gaat om het laden van javascripts in de editor, dus als je de code kopieert en plakt, zal het hoogstwaarschijnlijk een foutmelding geven dat er al variabelen bestaan. Om dit op te lossen hoef je alleen maar de code in het volgende blok te plaatsen:

(function() {
    // rest of code
})();

Sla je template nu op en je bent klaar!

Winkelwagen