Question

I’m trying to slide in a fixed image horizontally after the user scrolls say, 200px down on my website. The code looks something like this:

//CSS
div#slideimage
{
   position: fixed;
   left: -20%;
   width: 500%;
}


// JQUERY
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
   $('#slideimage').stop().animate({left: "100px"});
} else {
     $('#slideimage').stop().animate({left: "-400px"});
}
});

The problem is that the scrolling isn’t smooth, and seems to pause at parts. Can anyone tell me how to smoothly slide in the image horizontally after the user has scrolled down for example, 200px vertically.

Help is appreciated 🙂

Answer 1

This is because when the user scrolls jQuery will stack up animation queues to the browser. That creates a less smooth animation because the browser is flushed with multiple animation operations that get in the way. What you need to do is wait a few milliseconds to do the animation

$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
 setTimeout(function() {
   $('#slideimage').stop().animate({left: "100px"});
 }, 150);
} else {
   setTimeout(function() {
     $('#slideimage').stop().animate({left: "-400px"});
 }, 150);
}
});