I've used the code from <http://jqueryfordesigners.com/fixed-floating-elements> to float an element after scrolling to a certain point. Here is the site I'm working on: <http://bodyecology.com/articles/gut-type-update>

As you can see, the right column becomes fixed when scrolled, but overlaps at the footer. How can I cause it to stop at just above the footer?

Currently Using:

```
<script>
    jQuery(document).ready(function () {  
    var top = jQuery('#news_sidebar').offset().top - parseFloat(jQuery('#news_sidebar').css('marginTop').replace(/auto/, 0));
    jQuery(window).scroll(function (event) {

        var y = jQuery(this).scrollTop();

        if (y >= top) {

        jQuery('#news_sidebar').addClass('fixed');

        } else {

       jQuery('#news_sidebar').removeClass('fixed');
    }
  });
 });
</script>

```