Changer le css d'une div fixed selon le scroll

Par Alexandre #lbac, il y a 10 ans

Javascript

Salut à tous,

Je viens vous présente un petit soucis css/JS pour un site que je réalise. Je dois réaliser un site one page composé de plusieurs sections (chaque section fait au minimum la hauteur de la fenêtre) et je dispose d'un petit bouton de menu en haut à droite permettant d'afficher un menu. Mon soucis est que certaines des sections ont un fond blanc et d'autres un fond foncés.

J'aimerais donc que mon boutton change de couleur dès que je change de section (en scrollant). J'ai donc réalisé (après quelques recherches) ce petit JS :

function isInSection(section) { var top = $(window).scrollTop(); var bottom = top + $(window).height(); var elementTop = $(section).offset().top; var elementBottom = elementTop + $(section).height(); return (bottom >= elementTop && top <= elementBottom); } if( isInSection($('#section')) ) { $('.menu-icon').css('color', '#000000'); } // répété pour chaque section

Il fonctionne mais le soucis c'est que (comme chaque section a un height: 100%) que dès que je scrolle et que je rentre dans une autre section, l'icône change de couleur de suite sans même avoir eu le temps de parcourir la précédente section.

Je suis donc à la recherche d'une solution me permettant de résoudre ce petit contretemps.

Je vous remercie par avance :)

7 réponses

betaWeb, il y a 10 ans

Salut,

Ton spy se trouve au centre de l'écran non ?

Alexandre #lbac, il y a 10 ans

Non il se trouve en haut à droite de l'écran ^^

betaWeb, il y a 10 ans

Beh normalement il devrait changer une fois le spy passé alors.

Par contre y'a une petite erreur dans ton JS:

if( isInSection($('#section')) ) { /*...*/} // ici tu passes en paramètre le sélecteur jQuery var elementTop = $(section).offset().top; // Dans ta fonction tu repasses par un sélecteur jQuery, donc ça donnerait $($('#section')), pas bon ^^
Alexandre #lbac, il y a 10 ans

Oui sauf que dès je rentre dans la seconde section (en bas de page donc), l'icône (en haut de page) change de couleur du coup. Ce qui fait que je ne peux pas profiter du changement de couleur par section

betaWeb, il y a 10 ans

Question con: Tu as des IDs différents pour chaque section ? Genre #section-1, #section-2 ... ?

Alexandre #lbac, il y a 10 ans

Oui bien sûr

betaWeb, il y a 10 ans

Beh c'est que la position de ton spy n'est pas bien interprété. Tu as vérifié avec des console.log() la position du spy à un instant t ?