CODEWITHSUNDEEP
javascriptjquery
user3481320
user3481320

Reputation: 25

Stop jquery scroll when window resizes

I have a sidebar that follows you when you scroll down. but I don't want that animation on mobile. how do modify this code:

var $sidebar   = $(".registration_container"), 
    $window    = $(window),
    offset     = $sidebar.offset(),
    topPadding = 15;

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
        });
    } else {
        $sidebar.stop().animate({
            marginTop: 0
        });
    }
});

to accomodate that. Please help!

Upvotes: 0

Views: 37

Answers (1)

TeT Psy
TeT Psy

Reputation: 341

To do this on mobile, just add another if statement to specify a different code if its mobile.

you can use device.js or other means to detect mobile, even a simple smaller than window width can work.

Here is an example of stopping the animation for mobile

$window.scroll(function() {
    //detect if the browser is not mobile
    if(!$('body').hasClass('mobile')){
      if ($window.scrollTop() > offset.top) {
        $sidebar.stop().animate({
           marginTop: $window.scrollTop() - offset.top + topPadding
        });
      } else {
        $sidebar.stop().animate({
            marginTop: 0
        });
      }
    }else{
      //do something for mobile here
      //or just let css do the job 
    }
});

Upvotes: 1

Related Questions