0

No Jquery tem como remover uma classe CSS quando o scroll do mouse vai para cima?

Estou fazendo assim mais não está dando certo

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

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

});
4
  • Wagner, o que você quer exatamente? Quando o scroll for = 0 você irá remover uma classe de um elemento? Poste um exemplo para ficar mais claro. Commented 7/02/2018 às 12:37
  • Acho que não fui claro, quando estou em qualquer lugar da página, e role o mouse para cima, o Jquery remove uma classe Css Commented 7/02/2018 às 12:39
  • Vc quer que exclua a classe após a animação?
    – Sam
    Commented 7/02/2018 às 12:47
  • @dvd isso mesmo, como eu faria? Commented 7/02/2018 às 12:50

3 Respostas 3

1

Se você quiser remover a classe quando apenas rolar para cima, acho que o animate não vai ser a melhor opção. Se usar scroll é possível, veja esse exemplo:

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>

1
1

Acredito que o que você precisa é disso. No exemplo, setei o scroll para o final da página para lhe mostrar o evento, capturei o scroll em uma variável e depois criei as condições. No caso eu adicionei uma cor de fundo quando o scroll for = 0, no seu caso, você iria remover a classe que pretende. Obs: Essas verificações serão feitas sempre que o evento scroll for disparado.

$(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>

2
  • seria quase isso, mais quero remover a classe depois da animação Commented 7/02/2018 às 12:51
  • 1
    só acrescentar $('.nome_do_elemento').removeClass('nome_da_classe'). Commented 7/02/2018 às 12:52
0

simples, use o evento "scroll" para detectar quando o usuário faz scroll em sua página, depois pegue o valor de scrollTop e verifique se é maior que 0 se for você adiciona a sua lógica, veja esse exemplo: 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .