title: Fixed Floating Element Stop at Footer
body: <p>I've used the code from <a href="http://jqueryfordesigners.com/fixed-floating-elements" rel="nofollow">http://jqueryfordesigners.com/fixed-floating-elements</a> to float an element after scrolling to a certain point. Here is the site I'm working on: <a href="http://bodyecology.com/articles/gut-type-update" rel="nofollow">http://bodyecology.com/articles/gut-type-update</a></p>
  
  <p>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?</p>
  
  <p>Currently Using:</p>
  
  <pre><code>&lt;script&gt;
      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 &gt;= top) {
  
          jQuery('#news_sidebar').addClass('fixed');
  
          } else {
  
         jQuery('#news_sidebar').removeClass('fixed');
      }
    });
   });
  &lt;/script&gt;
  </code></pre>