In Jquery how to remove a CSS class when the mouse scroll goes up ?
I'm doing this way more is not working out
$('html, body').animate({scrollTop:0}, 800, function(){
$("#texto_posicao").removeClass("classecss");
});
Remove class when doing Scroll Up with JQuery
0
asked by anonymous 07.02.2018 / 13:33
3 answers
1
If you want to remove the class when just scrolling up, I think animate will not be the best option.
If you use scroll 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><divid="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>
07.02.2018 / 13:52
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, I captured the scroll in a variable and then created the conditions. In case I added a background color when the scroll is = 0, in your case, you would remove the class you want.
Note: These checks will be made whenever the scroll event is triggered.
$(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><divclass="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>
07.02.2018 / 13:47
0
simple, use the "scroll" event to detect when the user scrolls on your page, then get the value of scrollTop and verify that it is greater than 0 if it adds you to your logic, see this example: link
$(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><navclass="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>
07.02.2018 / 14:10