Mobile only jquery, is it possible?

Asked

Viewed 122 times

0

I have this snippet of my code that scrooges for the class ".flaps"

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

It would be possible to call the class .flaps on desktop and mobile the class .abas_mobile?

I’m doing it like this, but it’s not working

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

$(window).resize(function(){
    if ($(window).width() <= 800){  
$('html, body').animate({scrollTop: $(".abas_mobile").offset().top}, 300);
    }   
});
jquery

  • It is possible yes. In theory, the mobile site version should have the same behavior as the desktop version. What is not working?

  • with my code it does not change class, calls the same class on mobile and desktop, I want to call the class . tabs on desktop and mobile the class . abas_mobile

  • @Rickpariz was still the same thing, I want to call the class . tabs on desktop and mobile the class . tabs_mobile

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

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.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.