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

(reprise du message précédent)

Hahahaha

Comme dit JENCAL c'est pareil en Jquery et en Js.
C'est juste que :

var scroll = window.pageYOffset || document.documentElement.scrollTop;
if(scroll > 1000) {}

c'est plus lisible que :

if(window.pageYOffset || document.documentElement.scrollTop > 1000) {}

et en plus tu peux réutiliser la variable scroll a un autre endroit du code sans la recalculer a chaque fois.

Bon ben voilà, je débute mais je suis en plus un boulet. Ca marche pas... désolé

var scroll = window.pageYOffset;

window.addEventListener("scroll", function() {
 if (window.scrollY > 800){
	console.log(window.scrollY)
	document.getElementById("content").classList.add("content-transition");
}
});

Bon ben voilà, je débute et en plus je suis un boulet. Ca ne marche pas...

var scroll = window.pageYOffset;

window.addEventListener("scroll", function() {
 if (window.scrollY > 800){
	console.log(window.scrollY)
	document.getElementById("content").classList.add("content-transition");
}
});

robin25 a écrit :
Bon ben voilà, je débute et en plus je suis un boulet. Ca ne marche pas...

var scroll = window.pageYOffset;

window.addEventListener("scroll", function() {
 if (window.scrollY > 800){
	console.log(window.scrollY)
	document.getElementById("content").classList.add("content-transition");
}
});

Si si cela fonctionne très bien
https://codepen.io/JUSEN/pen/axYVeL?editors=1010
Modifié par JENCAL (18 Apr 2019 - 16:53)

il manque un point-virgule apres le console log. Vire-le.

Idéalement il faut que tu aille chercher le nombre de qui sépare le haut de ta page et ton bloc et que tu le mette à la place de 800 pour que ca soit dynamique en fonction de la taille de l'écran.

HAAAAAAAAAAAA!!!! HI HAAAAAAAA!!!! Ca marche!!!!

Merci vraiment à vous 2 pour la patience!!! Super sympa!!!

Effectivement j'ai vu sur pas mal de forums qu'il fallait mettre en place un "contrôleur" niveau de scroll. Mais pour cette fois je vais faire à "taton". Mais je vais peut être avoir un souci de respinsive design non?

Bon j'intègre au site et je verrai bien. Ca me donnera l'occasion de vous monter le résultat que je cherchais

Yordi a écrit :
C'était plutôt dans les combinaisons qu'on pouvait avoir si on n'applique pas de paranthèses:

a || b > x
Pour ici il va chercher a, si a = true c'est validé, sinon il regarder b>x.

Pour a || (b > x) c'est pareil.
donc a || b > x ET a || (b > x) c'est la même chose

Pour (a || b) > x bah pareil, c'est dans l'ordre, le (a || b) te renvoit true or false, et ensuite il est comparer au > x.

var a = false;
var b = true;
var x = -1;

if((a || b) > x){ // (a||b) te renvoi TRUE, et TRUE > -1 oui donc ça passe.
	//ça passe
  console.log("ça passe");
}

Les parenthèses c'est juste une question de "groupe" et n'influence pas l'ordre d’exécution
Modifié par JENCAL (18 Apr 2019 - 17:24)