11485 sujets

JavaScript, DOM et API Web HTML5

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

Pages :
Modérateur
(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... Smiley decu 

var scroll = window.pageYOffset;

window.addEventListener("scroll", function() {
 if (window.scrollY > 800){
	console.log(window.scrollY)
	document.getElementById("content").classList.add("content-transition");
}
});
Modérateur
Salut les gars,
En lisant vos réponses et sur base de ceci je me suis posé une question.
_laurent a écrit :
…
if(window.pageYOffset || document.documentElement.scrollTop > 1000) {}
…

Comment sont gérées les priorités des symboles (||, &&, <, > …) en JS ?
robin25 a écrit :
Bon ben voilà, je débute et en plus je suis un boulet. Ca ne marche pas... Smiley decu 

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)
Yordi a écrit :
Salut les gars,
En lisant vos réponses et sur base de ceci je me suis posé une question.

Comment sont gérées les priorités des symboles (||, &&, <, > …) en JS ?


Dans l'ordre de lecture.

par exemple le "ou" "||" se termine dès qu'un élément renvoit true. de gauche à droite. donc c'est plus une question d'ordre que de priorité.

plus d'infos général sur la manière ici : https://stackoverflow.com/questions/8996852/load-and-execute-order-of-scripts
Modifié par JENCAL (18 Apr 2019 - 16:53)
robin25 a écrit :
Ben oui c'est fou ça. Pourquoi ca marche pas en local sur mon navigateur. C'est fou ca!


Parce que 100% tu as des différence entre mes 4 lignes et tout ton code. mais tant qu'on voit pas ton code on peut pas deviner

Quand tu scrolls, dans ta console navigateur tu as quel erreur ?
Modifié par JENCAL (18 Apr 2019 - 16:57)
Modérateur
C'était plutôt dans les combinaisons qu'on pouvait avoir si on n'applique pas de paranthèses:

a || b > x
vs
a || (b > x)
vs
(a || b) > x
Ben pourtant j'ai repris l'ensemble de tes codes mis sur codepen... Je suis toujours dans le code test pas intégré au site final. C'est pour ca que c'est dingue que ca ne marche pas???
Modérateur
Yordi a écrit :
C'était plutôt dans les combinaisons qu'on pouvait avoir si on n'applique pas de paranthèses:

a || b &gt; x
vs
a || (b &gt; x)
vs
(a || b) &gt; x


Ha effectivement. Vu que je passe par une variable j'ai pas rencontré ce problème, mais bonne question... J'ai créé cet exemple à la volé, c'est moyen du coup... my bad
Modérateur
Et il faut que tu règle le "800". Sur un écran en pleine page ça sera pas adapté. Le console.log(scroll) était justement là pour écrire dans la console la valeur du scroll pour vérifier qu'on y arrive bien.
Modérateur
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? Smiley bawling
Bon j'intègre au site et je verrai bien. Ca me donnera l'occasion de vous monter le résultat que je cherchais
Modérateur
robin25 a écrit :
Mais pour cette fois je vais faire à "taton". Mais je vais peut être avoir un souci de respinsive design non? Smiley bawling

Yes c'est exactement ça. Tout comme ça vient de t'arriver, sur un écran de hauteur différente scrollera plus ou moins que ta valeur en dur adaptée a ton écran. Donc soit l’événement se déclenchera trop tard soit trop tôt... mais t'es sur la piste Smiley cligne
Modifié par _laurent (18 Apr 2019 - 17:19)
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)
Modérateur
JENCAL a écrit :
a || b &gt; x
Pour ici il va chercher a, si a = true c'est validé, sinon il regarder b&gt;x.

Yep, du coup c'est pas du tout ce qu'on cherche Smiley biggrin mais c'était juste pour l'exemple jme suis foiré Smiley bawling
OK alors je ferme pas le billet. J'ai déjà repéré des scripts mais je sais pas trop comment récupérer la valeur. Si ça vous intéresse de m'aider à finir la mission... Smiley rolleyes
Pages :
Sujet clos
Aller à