Question

I ‘m having a hard time how to properly describe what i’m asking but here’s the best example from boingboing.net. Look at the sidebar then scroll down to the bottom. Notice how the last widget(i dont know what it is, sorry.) or Advertise stays at its place when the user scrolls down? It also stops when reaching the bottom. how am i gonna do that?

i know the css attributes, position:fixed; but i guess that method is different from boingboing.net. need help on this matter. any help? Thank you very much!

Answer 1

Bind an event on scroll of window, and set the position of target div, based on the scrolltop of window.

$(window).scroll(function () {
   if($(this).scrollTop() >= 500){
      $('targetdiv').css('position','fixed');
   }
   else {
      $('targetdiv').css('position','relative');  // or any other position
   }
});

or better you can add a class on particular top of window which has position:fixed