11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Modifier les CSS d'un élément au moment ou il apparait

Pages :
Modérateur
Bon ca marche mais il fallait enlever la taille de l'écran sinon ca attend que le bloc soit en haut de la page.
Voila un brouillon : https://jsfiddle.net/undless/czwq65jk/24/

J'en ai profité pour enlever la création des variables de la fonction, on a pas besoin de les recreer a chaque fois que ca scroll.

Bonne continuation
Hey!!!

Bon alors voilà la bestiole : https://www-beta.led-visual-innovation.fr/

Ca fonctionne (sans le .offsetTop pour le moment). Merci encore!

Je vais tester ton nouveau code demain mais il faut d'abord que je fasse la transition dans le sens inverse quand on remonte la page et aussi que j'ajoute des transitions pour certains titres. Bon là normalement je devrais y arriver. hum...

Pour le offset, je suis en train de ma demander si ca va vraiment régler le problème du responsive vu qu'il y a des éléments qui se déplace et que les proportions de sont donc pas conservées...?

Bonne fin de journée! Smiley smile
Hello!

(je me demande si je vais pas ouvrir un nouveau sujet parce que ca commence à ressembler à un roman) Smiley smile

Alors voilà ça fonctionne très bien. j'ai aussi inversé la couleur des titres pour qu'ils ne soient pas blanc sur blanc après le changement : https://www-beta.led-visual-innovation.fr/

(le résultat est satisfaisant sur tous les formats d'écran donc pour l'instant je laisse comme ça)

Du coup, j'essaye de faire marche arrière quand on remonte dans la page (redevenir noir). Alors moi, pas con Smiley rolleyes , j'ai ajouté un script identique au précédent mais en inversant le ">" et en créant bien entendu une nouvelle classe à cible (fond noir). Ben si, un peu idiot quand même car marche pas! HAHAHAHA . Ca aurait été trop simple. j'ai aussi essayé de seulement ajouté une deuxième condition IF dans la même fonction. Sans succès non plus...

Mais pourquoi ça marche pas? Il y aurait un conflit entre les 2 évènements?
Modérateur
Salut,

Tu peux simplement garder la meme boucle, mettre un else a ton if et enlever la classe avec un classList.remove Smiley smile
Meilleure solution
Bonjour à tous,

juste pour le header, pourquoi tu n'utiliserai pas du full CSS?

.fusion-header-wrapper {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
}
pfffff.... facile le gars! OK super ca marche. j'aurais cru que comme ça il n'a aurait pas la transition dans l'autre sens mais si. Parfait.

Mission accomplie. Je me répète mais merci encore.

Par contre, pour le côté 'intello" du truc, pourquoi ma solution elle marchait pas à ton avis. dans le principe c'était pas bon non? (même si on est bien d'accord que c'était pas la plus simple).

Raphi merci. Oui pourquoi pas. mais je t'avoue que lorsque que j'en serai à me poser ces questions ce sera que j’approche de la fin du site et pour l'instant j'ai vraiment pas fini!! Smiley smile . Mais c'est noté! Smiley smile
Modérateur
robin25 a écrit :
Par contre, pour le côté 'intello" du truc, pourquoi ma solution elle marchait pas à ton avis. dans le principe c'était pas bon non? (même si on est bien d'accord que c'était pas la plus simple).

Je met 10 centimes sur un conflit CSS (si tu n’enlève jamais la classe précédente y'a un moment ou ça ne va plus bouger).
robin25 a écrit :
Raphi merci. Oui pourquoi pas. mais je t'avoue que lorsque que j'en serai à me poser ces questions ce sera que j’approche de la fin du site et pour l'instant j'ai vraiment pas fini!! Smiley smile . Mais c'est noté! Smiley smile

L'intérêt immédiat c'est de réduire la complexité du code pour pouvoir y revenir. Ça élimine tout le js dédié à garder l'élément en position fixed en haut de ta page quand tu scroll. Et quand on est pas à l'aise avec le js, c'est une chose de moins à gérer et c'est tant mieux.
Là, en 5 lignes de code c'est plié et c'est simple à débuguer.

Bon courage pour ton dev ! Smiley cligne
OK Laurent. Bien Compris. A la prochaine! Smiley smile

Raphi, oui ca se tient ce que tu dis. Sauf que je fais pas tout à la main. J'utilise un theme quand même hein!!! Smiley sweatdrop Par contre intéressant quand même pour alléger et optimiser le temps de chargement de la page. Je le garde en tête. Merci. Smiley smile
Pages :
Sujet clos
Aller à