Jquery only for mobile, is it possible?

Navigation
0

I have this snippet of my code that does a scrool for the class "tabs" 

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

Would it be possible to call the .abas_mobile class on the desktop and mobile .abas_mobile

I'm doing it like this, but it's not working out 

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

$(window).resize(function(){
    if ($(window).width() <= 800){  
$('html, body').animate({scrollTop: $(".abas_mobile").offset().top}, 300);
    }   
});
    
asked by anonymous 07.02.2018 / 12:37

2 answers

1

You have to separate the two animations for each version, and still use .stop() to stop one animation before starting another.

In the example below, switch the snippet to "full screen" to see the effect: 

$(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><pclass="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>
    
07.02.2018 / 12:53
0

What you need to do is create a function and assign "window.onresize = 'function name'" at the end of the script, I left an example created for you here . Resize the editor screen to see the result.

    
07.02.2018 / 12:54
View image until the gif is loaded Retrieve a property from a .properties file directly with thymeleaf