jQuery scrolling DIV: stop scrolling when DIV reaches footer
<p>I have a <code>#sidebar</code> (which starts below my <code>#header</code> div) and a <code>#footer</code> (around 120px off the bottom of the page).</p>

<p>I'm trying to make the sidebar scroll with the content of the page. The code below does this semi-successfully:</p>

<pre><code>/* profile sidebar */
#sidebar&gt;div{ width: 300px; margin-top: 10px; }
#sidebar.fixed&gt;div{position:fixed;top:0;}
#sidebar.fixed_bottom&gt;div{position:fixed;bottom:172px;}

jQuery(function ($) {
    $.fn.scrollBottom = function() { 
        return $(document).height() - this.scrollTop() - this.height(); 
    };

    var el = $('#sidebar'),
    pos = el.position().top;

    $(window).scroll(function() {
        if ($(this).scrollTop() &gt;= pos) {
            if ( $(this).scrollBottom() &lt;= 172 ) { 
                el.removeClass('fixed');
                el.addClass('fixed_bottom');
            } else { 
                el.removeClass('fixed_bottom');
                el.addClass('fixed');
            }
        } else {
            el.removeClass('fixed');
        }
    });
});
</code></pre>

<p>The problem is, on smaller resolutions, this makes the sidebar "jump" once you reach a certain position on the page. It stops it from overlapping the footer (which is the problem if you remove the <code>fixed_bottom</code> class) but doesn't look good.</p>

<p>What I'd like to do is this: user scrolls to the bottom of the page, the sidebar scrolls along with the content until it reaches say 20px above the top of my footer, at which point it stays there until the user scrolls back up.</p>

<p>Thanks in advance,</p>
