Fixed Floating Element Stop at Footer

Question

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>

Answer 1

This fiddle does what you are looking for:

http://jsfiddle.net/ZczEt/9/

Here is the javascript that handles the floating element $('#summary') on the right:

$('#summary').scrollToFixed({
    marginTop:
        $('.header').outerHeight() + 10,
    limit:
        $('.footer').offset().top -
        $('#summary').outerHeight() -
        10
});

Here is the jquery plugin and its source:

https://github.com/bigspotteddog/ScrollToFixed