How to make fixed floating element stop at #footer?

Question

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?

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

Answer 1

Here is something that might work for you:

http://jsfiddle.net/y3qV5/7/

The jquery plugin that is doing this sets elements fixed whatever margin from the top of the page. With an optional limit, it will unfix the element and have it continue to scroll up the page, keeping it away from your footer. You would set the limit to the top of your footer, plus the height of whatever your target element is.

Here is the code usage for this scenario (the fiddle above):

$(document).ready(function() {
    $('#cart').scrollToFixed({
        marginTop: 10,
        limit: $('#footer').offset().top 
    });
});

Here is the link to the plugin and its source:

https://github.com/bigspotteddog/ScrollToFixed