Sticky : quand un élément est collé
En CSS, la position « sticky » permet de fixer un élément dés qu'il est sur le point de quitter le viewport. Mais cet état transitoire n'est identifié ni par une pseudo-classe CSS comme :hover par exemple, ni par un événement DOM. Voilà une petite solution rapide pour émuler l'un et l'autre.
- Si on a besoin d'appliquer des styles particuliers quand un élément adhère, on joue sur l'ajout/suppression d'une classe HTML.
- Si on veut appliquer des traitements supplémentaires, on émet un événement spécifique.
/**
* @param {HTMLElement[]} elements
* @param {Number} [ratio=1]
* @return {IntersectionObserver}
*/
export const sticky = (elements, ratio = 1) => {
const observer = new IntersectionObserver(entries => {
entries.forEach(e => {
const el = e.target,
state = e.intersectionRatio < ratio;
el.classList.toggle('sticked', state);
el.dispatchEvent(new CustomEvent('sticked', {detail: state}));
});
}, {threshold: ratio});
elements.forEach(element => observer.observe(element));
return observer;
};