Ajouter une class au body quand une div apparait a l'ecran ?

Bonjour,

Tout est plus ou moins dit dans le titre :) je pense que c'est pas trop compliqué mais je suis trop naze en js :/

En gros, j'essaie de faire :

- quand un element (#monelement) devient visible (au scroll) dans le viewport -> addclass au body
- quand un element (#monelement) devient disparait de l'ecan (au scroll) -> removeclass au body

Et surtout je suis graphiste/intégrateur html et trop nul en js pour l'ecrire... :/
J'arrive a le fair een mettant une taille donné pour le scroll mais je ne peux pas pour ce cas de figure car la hauteur de scroll varie d'un page à l'autre...

MA reconnaissance éternelle à mon sauveur ;)

ME

salut, je t'invite a te documenter sur getBoundingClientRect() developer.mozilla.org/fr/docs/Web/API/Element/getBoundingClientRect
tu auras aussi besoin de la hauteur de ton ecran : developer.mozilla.org/fr/docs/Web/API/Window/innerHeight

salut,

et voir aussi l'excellente contribution de l'excellent Bovino, il y a déjà longtemps:

https://www.developpez.net/forums/d6...n/#post3932542

(source que j'ai pompée honteusement ici, même si les inner et les Offset ont tendance à ne pas être standard)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

window.addEventListener("wheel", scrollwheel); window.addEventListener("scroll", scrollwheel);   function scrollwheel(){ if(document.querySelector("#div").offsetTop > window.pageYOffset && document.querySelector("#div").offsetTop < window.pageYOffset+window.innerHeight){ document.body.style.background="blue" } else{ document.body.style.background="none" } }

---

Merci beaucoup pour vos réponses :) !