windows scroll smooth effect

Question

Hi All ,

I have the following code which centers the popup when we scroll , it quickly re-positions itselef to center. How to get the smoothing effect as if it is dropping very smooth.

 $(window).scroll(function () {

        var top = ($(window).height() - $('.myPopUp').height()) / 2 + $(window).scrollTop();
        $('.myPopUp').animate({ top: top }, 10);

});

I tried to play around with speed , but its pretty fast.

Answer 1

You just need to increase your animation duration, currently at 10ms, like this:

$(window).scroll(function () {
  var top = ($(window).height() - $('.myPopUp').height()) / 2 + $(window).scrollTop();
  $('.myPopUp').animate({ top: top }, 200);
});

Animation frames are on a 13ms interval, so 10ms will be an instant change, giving it a longer duration, like the 200ms above will give it a much smoother effect. For quick scrolling scenarios, you'll probably want a .stop() in there too, like this:

$('.myPopUp').stop(true).animate({ top: top }, 200);