How to make fixed floating element stop at #footer?

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",
                 开发者_JS百科   "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>

---

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

---

Why not eliminate all the javascript and do it with CSS:

.sidebar-left {
    position: fixed;
    bottom: 20px; /* height of your footer */
}

---

I see the easiest way to reach this is to use position: sticky; instead of position: fixed; and give the parent of this section position: relative; to keep the sticky container within the parent container borders.