为什么我的浮动div在滚动上重叠我的页脚而不是停在它？

Question

我试图创建一个浮动div，我想停在页脚。我在我的浮动div上添加了margin-top:50px，但它超过了我的页脚。我需要margin-top为50px。我该如何解决这个问题？

＆＃13;

＆＃13;

$(document).ready(function () {

    var length = $('#content').height() - $('#scroll-block').height() + $('#content').offset().top;

    $(window).scroll(function () {

        var scroll = $(this).scrollTop();
        var height = $('#scroll-block').height() + 'px';

        if (scroll < $('#content').offset().top) {

            $('#scroll-block').css({
                'position': 'absolute',
                'top': '0'
            });

        } else if (scroll > length) {

            $('#scroll-block').css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });

        } else {

            $('#scroll-block').css({
                'position': 'fixed',
                'top': '0',
                'height': height
            });

        }
    });

});

＆＃13;

#header {
    background: #c2c2c2;
    height: 150px;
}
#wrapper {
    position: relative;
    min-height: 500px; /* Just as an example */
    width: 500px;
}
#content {
    position: absolute;
    background: #d7d7d7;
    width: 150px;
    height: 100%;
}
#right {
    position: relative;
    width: 350px;
    float: right;
    height:200px;
}
#scroll-block {
    background: #0096d7;
    width: 150px;
    color: #fff;
    height:50px;
    margin-top:50px;
}
.clear {
    clear: both;
}
#footer {
    background: #c2c2c2;
    height: 500px; /* Just as an example */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="header">Header</div>
<div id="wrapper">
    <div id="content">
        <div id="scroll-block">Sidebar Text here!</div>
    </div>
    <div id="right">This is the text of the main part of the page.</div>
    <div class="clear"></div>
</div>
<div id="footer">Footer</div>

＆＃13;

＆＃13;

＆＃13;