Dounia Dounia - 3 months ago 12
jQuery Question

jQuery .addClass() on scroll event doesn't work

I am new to jQuery and I am facing an issue with addClass() on a scroll event. Here is my code:

HTML:

<div class="sidebar">
<ul>
<li id="pop">Home</li>
<li>Programs</li>
<li>Replay</li>
</ul>
</div>


CSS:

.sidebar div {
width: 150px;
height: 250px;
float: right;
position: fixed;
z-index: 1;
}

.sidebar ul {
list-style-type: none;
padding-left: 0;
position: fixed;
}

.sidebar li {
background: gray;
color: white;
text-transform: uppercase;
font-size: 13px;
width: 80px;
}

.active {
width: 140px;
background: orange;
font-size: 25px;
}


jQuery:

$(document).ready(function() {
$(window).scroll(function() {

var st = $(this).scrollTop();
if( st > 500 ) {
$("#pop").addClass("active");
} else {
$("#pop").removeClass("active");
}
});
});


I have also tried to use toggleClass() without any success. I can't figure out what what is preventing it from working.

Thank you in advance for your help.

Answer

Change like this :

Css :

Remove this :

 .sidebar li {
  background: gray;
  color: white;
  text-transform: uppercase; 
  font-size: 13px;
  width: 80px;
  }

And add :

.normal {
  font-size: 13px;
  background: gray;
  color: white;
  text-transform: uppercase; 
  width: 80px;
  }

  .active {
  width: 140px;
  background-color:orange;
  font-size: 25px;
  text-transform: uppercase;
  color: white;
  }

Html :

Add class normal to lis

<ul>
  <li id="pop" class="normal">Home</li>
  <li class="normal">Programs</li>
  <li class="normal">Replay</li>
</ul>

Jquery :

$(document).ready(function(){

    $(window).on("scroll",function() {

        if($(this).scrollTop() > 500) 

            $("#pop").removeClass("normal").addClass("active");

        else 

            $("#pop").removeClass("active").addClass("normal");


    })
})

Final code :

<html>
    <title>This is test</title>
    <head>
        <style>
            body {
                height: 2500px;
            }
            .sidebar div {
 width: 150px;
 height: 250px;
 float: right;
 position: fixed;
 z-index: 1;
 }

 .sidebar ul {
 list-style-type: none; 
 padding-left: 0;
 position: fixed;
 }

  .normal {
  font-size: 13px;
  background: gray;
  color: white;
  text-transform: uppercase; 
  width: 80px;
  }

  .active {
  width: 140px;
  background-color:orange;
  font-size: 25px;
  text-transform: uppercase;
  color: white;
  }
        </style>
    </head>
    <body>
        
       <div class="sidebar">
    <ul>
        <li id="pop" class="normal">Home</li>
        <li class="normal">Programs</li>
        <li class="normal">Replay</li>
    </ul>
 </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
        $(document).ready(function(){

            $(window).on("scroll",function() {

                if($(this).scrollTop() > 500) 

                    $("#pop").removeClass("normal").addClass("active");

                else 

                    $("#pop").removeClass("active").addClass("normal");


            })
        })

        
        </script>
    </body>
</html>