How to make fixed floating element stop at #footer?
<p>Below is the code I am using to fix a sidebar as the user scrolls. As of now, it overlaps with my footer. How can I make it stop at a certain point or when it hits the footer?</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
    if ($('.pageheaderwrap').length) {
        $(window).scroll(function() {
            if ($(this).scrollTop() &gt; 362) {
                $(".sidebar-left").css({
                    "position": "fixed",
                    "top": 0
                });
            } else {
                $(".sidebar-left").css({
                    "position": "absolute",
                    "top": "255px"
                });
            }
        });
    } else {
        $(window).scroll(function() {
            if ($(this).scrollTop() &gt; 230) {
                $(".sidebar-left").css({
                    "position": "fixed",
                    "top": 0
                });
            } else {
                $(".sidebar-left").css({
                    "position": "absolute",
                    "top": "125px"
                });
            }
        });
    }
});
&lt;/script&gt;
</code></pre>
