Sticky elementen zonder javascript

Door in je CSS bestand de volgende code aan een element toe te voegen kun je deze sticky maken:

.stickyelement {
    position: -webkit-sticky;
    position: sticky;
    top: 90px !important;
}

De top declaratie bepaalt uiteraard de positie tot de bovenkant van de viewport (ongeacht of er wel of geen parent element is).

Is er echter wel een parent element, houdt er dan rekening mee het effect alleen nog optreedt, zolang de parent element nog binnen de viewport zichtbaar is. Je kunt daardoor ook juist hele leuke effecten creeeren zoals deze op de Coolblue website:

Werkt het niet?

Dan is de kans heel groot dat één van de parents een overflow heeft die staat op hidden, scroll of auto.

Om hier achter te komen kun je dit javascriptje even in de console van je browser draaien om te zien of, en zo ja, waar dit het geval is:

// Pas de class 'sticky' aan naar die van jouw sticky element
let parent = document.querySelector('.sticky').parentElement;

while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if(hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

Meer weten?

Zoek je een uitgebreide uitleg over de sticky position? Kijk dan eens naar deze video van Kevin Powell: