javascript - Hur man får ett fast flytande element att stanna vid #footer?

Nedan är koden jag använder för att fästa en sidopanel när användaren skrollar. För tillfället överlappar den med min sidfot. Hur kan jag få den att stanna vid en viss punkt eller när den når sidfoten?

<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>

Svar #1

Här är något som kan fungera för dig:

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

jQuery-pluginet som gör detta sätter element fasta oavsett marginal från toppen av sidan. Med en valfri gräns kommer det att lossa elementet och låta det fortsätta rulla upp på sidan, och hålla det borta från din footer. Du skulle ställa in gränsen till toppen av din footer, plus höjden på det element du vill målinrikta.

Här är kodanvändningen för detta scenario (fiddlen ovan):

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

Här är länken till pluginet och dess källa:

https://github.com/bigspotteddog/ScrollToFixed

Svar #2

Varför inte ta bort all JavaScript och göra det med CSS:

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