0

Tenho esse trecho do meu código que faz um scrool para a class ".abas"

$('html, body').animate({scrollTop: $(".abas").offset().top}, 300);

Seria possível chamar a classe .abas no desktop e no mobile a classe .abas_mobile?

estou fazenso assim, mais não está dando certo

$('html, body').animate({scrollTop: $(".abas").offset().top}, 300);

$(window).resize(function(){
    if ($(window).width() <= 800){  
$('html, body').animate({scrollTop: $(".abas_mobile").offset().top}, 300);
    }   
});
3
  • É possível sim. Em tese, o site versão mobile deve ter o mesmo comportamento da versão desktop. O que não está dando certo?
    – Sam
    Commented 7/02/2018 às 11:42
  • com o meu código ele não troca de classe, chama a mesma classe no mobile e no desktop, quero chamar a classe .abas no desktop e no mobile a classe .abas_mobile Commented 7/02/2018 às 11:44
  • @RickPariz ficou ainda a mesma coisa, quero chamar a classe .abas no desktop e no mobile a classe .abas_mobile Commented 7/02/2018 às 11:49

2 Respostas 2

1

Tem que separar as duas animações para cada versão, e ainda usar .stop() para parar uma animação antes de começar a outra.

No exemplo abaixo, alterne o snippet para "tela cheia" para ver o efeito:

$(window).on("load resize",function(){
   $('html, body').stop();
   var abas = $(this).width() <= 800 ? ".abas_mobile" : ".abas";
   $('html, body').animate({scrollTop: $(abas).offset().top}, 300);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<p class="abas">desk</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<p class="abas_mobile">mob</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

0
0

O que você precisa fazer é criar uma função e atribuir "window.onresize = 'nome da função'" no final do script, deixei um exemplo criado para você aqui. Redimensione a tela do editor para ver o resultado.

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 .