Prevent fixed div from moving past a certain

Question

This turned out to be more difficult than I anticipated. I have a #content area, a #left, and a #right with a div#sidebar inside the #right element.

Currently, the fixed sidebar scrolls down to overlap with the footer. How can I get it to terminate at a higher point?

http://jsfiddle.net/uzbNL/

I attempted to implement this previous stack overflow accepted answer, but had no luck with it.

Answer 1

Look at the following jsFiddle. I've added a jQuery listener on page scroll. whenever the page reaches a certain scroll I add new class fixed to the #sidebar causing it to stay fixed on the bottom of #right container.

$(function(){
    $(window).scroll(function(e){
      if($(this).scrollTop()>1750)
          $('#sidebar').addClass('fixed')
      else
          $('#sidebar').removeClass('fixed')
    });    
});

CSS

#sidebar.fixed{position:absolute;top:auto;bottom:0px;}