Remove class when Scroll Up with Jquery

Question

In the Jquery can remove a CSS class when the mouse scroll goes up?

I’m doing it this way but it’s not working

$('html, body').animate({scrollTop:0}, 800, function(){

$("#texto_posicao").removeClass("classecss");

});

Answer 1

I believe what you need is this. In the example, I set the scroll to the bottom of the page to show you the event, captured the scroll in a variable and then created the conditions. In case I added a background color when scroll is = 0, in your case you would remove the class you want. Note: These checks will be done whenever the event scroll is fired.

$(document).ready(function(){
     $(this).scrollTop(5000);
    $(this).scroll(function(){
     
      scroll = $('html, body').scrollTop();

      if(scroll > 0) {
        $('body').css('background-color','yellow')
      }
      else $('body').css('background-color','black')
    })
});

.vermelho, .azul,.verde{
  width:200px;
  height:100px;
}
.vermelho{
  background-color:red;
}
.azul{
 background-color:blue;
}
.verde{
 background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vermelho"> Elemento com cor vermelha</div>
<div class="azul"> Elemento com cor azul</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="verde"> verde</div>

Answer 2

If you want to remove the class when just scroll up, I think the animate It’s not gonna be the best option. Use scroll it is possible, see this example:

var lastScrollTop = 0;
 $(window).on('scroll', function() {
    var st = $(this).scrollTop();
   if(st < lastScrollTop) {
     $("#texto_posicao").removeClass("estilo");
   }
   else {
     $("#texto_posicao").addClass("estilo");
   }
   lastScrollTop = st;
 });

.estilo {
  background-color: yellow;
  color: red;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texto_posicao" class="estilo">
Lorem ipsum varius fames magna volutpat luctus leo iaculis, mauris quisque dapibus fringilla nam sodales ultrices, malesuada massa eros aenean tellus ad felis. enim aenean ante aptent quisque donec ut in molestie, dictum justo rhoncus enim convallis leo eleifend, vestibulum proin dapibus nibh volutpat eros ligula. cubilia viverra porttitor facilisis primis molestie augue dolor fames lobortis, aenean et rutrum inceptos lectus donec in et, ut cubilia malesuada odio duis habitasse venenatis consectetur. sagittis mattis quisque consectetur per dictumst maecenas ipsum, vehicula phasellus interdum libero non. magna malesuada vel arcu donec vivamus bibendum potenti imperdiet erat est, pulvinar taciti netus pretium sagittis justo euismod tortor suscipit, condimentum congue adipiscing pretium nisl cubilia aptent fringilla vestibulum. 

	Eu felis habitasse nunc sapien vehicula fringilla rutrum scelerisque, ipsum velit donec lobortis vestibulum ultricies justo non neque, ut cursus eleifend commodo dapibus integer tellus. ad facilisis fringilla aenean ut et ligula eu, maecenas convallis volutpat facilisis himenaeos blandit lobortis vitae, suscipit vivamus ad mollis tincidunt varius. ullamcorper habitant sollicitudin sagittis vel aenean consectetur rhoncus elit erat aliquam, augue eros auctor commodo dapibus pellentesque semper nec quis convallis, amet tempor turpis tempus dictumst nullam lacus curabitur velit. tristique vivamus class potenti erat lorem morbi imperdiet aliquet nisi habitasse, massa curae id euismod pretium eros lobortis litora. 
  
  	Eu felis habitasse nunc sapien vehicula fringilla rutrum scelerisque, ipsum velit donec lobortis vestibulum ultricies justo non neque, ut cursus eleifend commodo dapibus integer tellus. ad facilisis fringilla aenean ut et ligula eu, maecenas convallis volutpat facilisis himenaeos blandit lobortis vitae, suscipit vivamus ad mollis tincidunt varius. ullamcorper habitant sollicitudin sagittis vel aenean consectetur rhoncus elit erat aliquam, augue eros auctor commodo dapibus pellentesque semper nec quis convallis, amet tempor turpis tempus dictumst nullam lacus curabitur velit. tristique vivamus class potenti erat lorem morbi imperdiet aliquet nisi habitasse, massa curae id euismod pretium eros lobortis litora. 

</div>

Answer 3

simple, use the "scroll" event to detect when the user scrolls on your page, then take the value of scrollTop and check if it is higher than 0 if it is you add your logic, see this example: https://jsfiddle.net/arzb4fhm/

$(window).on('scroll', function() {
if ( $(window).scrollTop() > 0) {
$('.navigation').addClass('sticky');
$('.container h1').text('adicionado classe quando scrollTop');
  } else {
$('.navigation').removeClass('sticky');
  }
});

body {
  margin: 0;
  font-family: arial, sans-serif;
  color: #333;
}
*,
*::after,
*::before {
  box-sizing: border-box;
}
.navigation {
  padding: 10px 0;
  background: linear-gradient(to top, #fd79a8, #e84393);
}

.navigation ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navigation li {
  flex: 0 1 auto;
}
.navigation a {
  flex: 0 1 auto;
  font-family: arial, sans-serif;
  text-decoration: none;
  color: #fff;
  padding: 10px 15px;
}
.navigation.sticky {
  position: sticky;
  top: 0;
  left: 0;
}
.container {
  padding: 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation">
  <ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
  </ul>
</nav>
<div class="container">
  <h1>Lorem ipsum dolor sit amet.</h1>
  <p>Lorem ipsum dolor sit amet, consectetu</p>
<pre>









































</pre>
</div>