Événement à détecter lorsque position:sticky est déclenché

Question

J'utilise le nouveau position: sticky ( info ) pour créer une liste de contenu semblable à celle d'iOS.

Il fonctionne bien et est de loin supérieur à la précédente alternative JavaScript ( exemple ) mais pour autant que je sache, aucun événement n'est déclenché, ce qui signifie que je ne peux rien faire lorsque la barre atteint le haut de la page, contrairement à la solution précédente.

J'aimerais ajouter une classe (par ex. stuck ) lorsqu'un élément avec position: sticky en haut de la page. Existe-t-il un moyen d'écouter cela avec JavaScript ? L'utilisation de jQuery est correcte.

Answer 1

Quelque chose comme cela fonctionne également pour une hauteur de défilement fixe :

// select the header
const header = document.querySelector('header');
// add an event listener for scrolling
window.addEventListener('scroll', () => {
  // add the 'stuck' class
  if (window.scrollY >= 80) navbar.classList.add('stuck');
  // remove the 'stuck' class
  else navbar.classList.remove('stuck');
});