Partage
  • Partager sur Facebook
  • Partager sur Twitter

Ajouter et supprimer des class CSS lors du scroll

datsid
    31 décembre 2018 à 16:19:45

    Bonjour, 

    J'ai un code HTML comme ceci : 

    <div class="row">
 <div class="col-12 color-blue" id="test-scroll">
 <p> blablabla </p>
</div>
</div>

    avec le CSS suivant : 

    .color-blue {
background-color: blue;
height: 1000px;
}

.change {
background-color: red;

}

    Lors du scrolling (qui est ma deuxième DIV) je voudrais ajouter la classe "change" a ma div. Etant néophyte en JS, je me suis renseigné et trouver un code du style : 

    $(window).scroll(function() {    
            var scroll = $("#test-scroll").scrollTop();
        
             
            if (scroll >= 2) {
                $("#scroll_cgu").addClass("change");
            }
        });

    Cependant ça ne fonctionne pas et je voudrais savoir pourquoi ? 

    Merci !

    • Partager sur Facebook
    • Partager sur Twitter
    Arthur222
      31 décembre 2018 à 18:26:51

      Il faut être sur que ta div a bien un scroll, pour vérifier tu mets un border rouge sur ta div et tu vois si le contenu se scroll. Ce code marche bien :

      <!DOCTYPE html>
<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>

#ancre{
	position:fixed;
}
#b{
	position:relative;
	max-height:100px; width:50px;
	border:2px solid red;
	overflow:scroll;
}
.b{
	background-color:blue;
}
.a{
	background-color:red;
}
</style>
</head>
<body>
<span id="ancre">ancre</span>
<div id="b"></div>
<script>
//$(document).ready(function(){
var ancre = $("#ancre");
for(var i=0;i<100;i++){
	$("#b").append(i+"<br>");
}
$("#b").scroll(function(){
	var a = $(this).scrollTop();
	if (a>400) {
		ancre.addClass("a");
		ancre.removeClass("b");
	}
	else {
		ancre.addClass("b");
		ancre.removeClass("a");
	}
});
//});

</script>
</body>

</html>



      • Partager sur Facebook
      • Partager sur Twitter

      Ajouter et supprimer des class CSS lors du scroll

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur ●
      • Markdown