jQuery: scroll and box position

In this post I will show you how to create the effect of a box that changes its top position when the page is scrolled. All we need to do is to set position: relative on the box we want to move in our CSS and then use jQuery. In order to add an additional bouncing effect, we'll also include the jQuery Easing plugin in our page. Here's the jQuery code:

$(function() {

  $(window).scroll(function() {
  
    $('#content-sub').stop(true, true).
    animate({
      top: $(window).scrollTop()    
    }, 'slow', 'easeOutBounce');
  
  });

});

We attach the scroll event to the window object and then we use its scrollTop value to change our top property. We also need to create a straight animation by using the stop() method with both its values set to true so that we have only one animation at time without any trailing effects. You can see the demo below.

Demo

Live demo