11528 sujets

JavaScript, DOM et API Web HTML5

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

Pages :
Bonjour,
Je cherche je cherche mais je ne trouve pas de solution pour modifier les CSS d'un élément au moment ou il apparait dans la page en scrollant.

Je travaille sur un site complet mais pour le principe voici un code simple sur le même principe. 2 div l'une en dessous de l'autre. La première ne sert qu'a repousser la deuxième en dessous de la ligne de flottaison pour tester le code. Le but est de changer le background de la deuxième div quand elle apparait sur la page (elle passe du noir au bleu).

Voilà où j'en suis (bien tendu ça ne marche pas). Si quelqu'un à une idée... Merci d'avance!

<style>
#test{
width: 500px;
height: 1200px;
background-color:red;
}
#content{
width: 500px;
height: 200px;
background-color:black;
}
.content-transition{
    background-color: blue;
    transition-duration: 4s;
}
</style>

<script>
$(window).scroll(function(){
    if( $(window).scrollTop() > 200){
	document.getElementById("content").classList.add = "content-transition";
    }
  });
</script>

<body>
<div id="test"></div>
<div id="content"></div>
</body>
Je crois que ça ne fonctionne pas.... Smiley decu Ah moins que j'ai mal compris la modif mais je ne crois pas...??? Mais merci tout de même.
Salut JENCAL,

J'ai essayé ça donne rien. Smiley decu

J'ai l'impression que la détection du niveau de scroll dans la page est bien plus compliquée que mon script actuel. Il y a pas mal de billets à ce sujet sur Internet mais la plupart du temps la solution n'est pas trouvée. La plupart finissent pas ajouter une librairie JQuery ce que je ne souhaite pas faire.

Merci encore! Smiley smile
Modérateur
Salut,


Plusieurs choses :


- la transition doit etre défini dans l'état de base. ici tu ne donne pas l'objet de la transition, et la durée est dans la classe appliqué. ca ne peut pas marcher.

#content{
width: 500px;
height: 200px;
background-color:black;
transition: background-color 2s;
}

.content-transition{
    background-color: blue;
}


- Ensuite tu tente d'overider un id avec une classe... :

#content{
width: 500px;
height: 200px;
background-color:black;
transition: background-color 2s;
}

#content.content-transition{
    background-color: blue;
}


- Et enfin classlist.add est une fonction il ne faut pas de =
document.getElementById("content").classList.add("content-transition");


Et voila :

https://jsfiddle.net/undless/czwq65jk/1/
robin25 a écrit :
Salut JENCAL,

J'ai essayé ça donne rien. Smiley decu

J'ai l'impression que la détection du niveau de scroll dans la page est bien plus compliquée que mon script actuel. Il y a pas mal de billets à ce sujet sur Internet mais la plupart du temps la solution n'est pas trouvée. La plupart finissent pas ajouter une librairie JQuery ce que je ne souhaite pas faire.

Merci encore! Smiley smile


https://codepen.io/JUSEN/pen/axYVeL

si si cela fonctionne bien.

Voir l'exemple de Laurent aussi. même principe
Modifié par JENCAL (18 Apr 2019 - 15:11)
Modérateur
robin25 a écrit :
La plupart finissent pas ajouter une librairie JQuery ce que je ne souhaite pas faire.

Smiley confus
Heu.....

Dans ton code de base :
$(window).scroll(function(){

C'est déjà du JQuery hein.... du coup nos solutions reprennent ton code et utilisent donc du JQuery...

En js pur c'est plutot :
window.addEventListener("scroll", function() {


Idem pour le 
$(window).scrollTop()
Aaaaaaah il me semblait bien que ca ressemblait pas à ce que j'avais vu dans mes premiers tutos en ligne cette écriture!!!! Smiley confused J'en suis qu'au début alors je me disais que j'allais voir ça plus tard. Ca m'apprendra à prendre de bouts de code un peu partout sur le Web!! Merci!!!

Je teste et je reviens!! Smiley smile

Merci et surtout des explications en plus des solutions. Ca permets de comprendre et de progresser!
Alors, hum... Voilà ou j'en suis dans la modif pour JS sans JQuery :

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


Bien entendu, ca marche pas. Je dois avouer que je ne comprends pas très bien ce de fait la ligne 
console.log(window).scrollTop())
Ah ok. J'imagine qu c'est grâce au guillemets autour...

Et sinon pour l'adaptation de ton code... tu crois que c'est trop compliqué? Sinon je vais charger Jquery tant pis...
Modérateur
robin25 a écrit :

Bien entendu, ca marche pas. Je dois avouer que je ne comprends pas très bien ce de fait la ligne 
console.log(window).scrollTop())


Cette ligne n'a rien à faire la. Elle est fausse (mal recopiée) et c'était juste un test.

Deplus $(window).scrollTop() c'est aussi du Jquery comme je t'ai dit.

En Js pur il faut faire un truc du genre :

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


-> https://jsfiddle.net/undless/czwq65jk/2/
Modifié par _laurent (18 Apr 2019 - 16:17)
robin25 a écrit :
Alors, hum... Voilà ou j'en suis dans la modif pour JS sans JQuery :


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


Bien entendu, ca marche pas. Je dois avouer que je ne comprends pas très bien ce de fait la ligne 
console.log(window).scrollTop())


Tu m'étonnes que ça marche pas Smiley smile

Faut bien INDENTER et faitre EXTRÊMEMENT attention a toutes les accolades ET les parenthèses...

1) if window.scrollTop() > 800){ // Ici , ton IF est fermer mais pas OUVERT.. donc ça pète ton code.
2) .scrollTop() est une fonction JQUERY, window seul est du javascript pure (complétement différent de $(window) qui est de JQUERY (visible grâce au dollars))
3) console.log(window).scrollTop() tu ferme une parenthèse après window donc le .scrollTop() (jquery) n'existe pas pour console.log().
4) pour faire un scrolltop() javascript c'est scrollY => window.scrollY.


Correction : 

 if (window.scrollY > 800){
	console.log(window.scrollY)
	document.getElementById("content").classList.add("content-transition");
}
Ah OK. Voilà, il me semblait bien qu'il fallait déclarer une variable. Smiley smile j'en conclu donc qu'en Jquery les variables ne sont pas nécessaires.

Ok je retourne à mon code et je reviens.
robin25 a écrit :
Ah OK. Voilà, il me semblait bien qu'il fallait déclarer une variable. Smiley smile j'en conclu donc qu'en Jquery les variables ne sont pas nécessaires.

Ok je retourne à mon code et je reviens.


si, autant qu'en javascript pure.
Modérateur
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.
Pages :
Sujet clos
Aller à