---
title: "Sticky elementen zonder javascript | Bart Sallé"
description: "Ontdek hoe je elementen sticky maakt in CSS en los problemen met overflow op. Leer meer over handige tools en bekijk Kevin Powell's video voor tips!"
url: https://www.bartsalle.nl/blog/sticky-elementen-zonder-javascript/
language: nl
---

[Home](https://www.bartsalle.nl/)/[Blog](https://www.bartsalle.nl/blog/)/Sticky elementen zonder javascript
CSS

# Sticky elementen zonder javascript

29 januari 2022 CSS

![Sticky elementen zonder javascript](https://www.bartsalle.nl/beheer/storage/uploads/2026/09/17/css_uid_6aabe1a5d4710.jpeg)

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:

[Vraag advies over dit onderwerp](https://www.bartsalle.nl/contact/#form)

### Vraag over dit artikel?

Loop je ergens tegenaan of wil je hulp bij iets vergelijkbaars?

[Neem contact op](https://www.bartsalle.nl/contact/#form)

### Categorieën

- [CSS](https://www.bartsalle.nl/blog/?categorie=css)

Meer lezen

## Gerelateerde artikelen

Algemeen

### Ik wil web developer worden maar welke opleiding of cursus kan ik dan het beste volgen?

25 september 2022 Lees meer

[Ik wil web developer worden maar welke opleiding of cursus kan ik dan het beste volgen?](https://www.bartsalle.nl/blog/ik-wil-web-developer-worden-maar-welke-opleiding-of-cursus-kan-ik-dan-het-beste-volgen/)

CSS

### Responsive kolomvolgorde aanpassen in Bootstrap 4

15 juni 2020 Lees meer

[Responsive kolomvolgorde aanpassen in Bootstrap 4](https://www.bartsalle.nl/blog/responsive-kolomvolgorde-aanpassen-in-bootstrap-4/)

CSS

### CSS variabelen

14 juni 2020 Lees meer

[CSS variabelen](https://www.bartsalle.nl/blog/css-variabelen/)