Responsive Scrolling Sidebar To Footer Stops

by bizamajig

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="debug" style="position: fixed; top: 0; left: 0;"></div>
<div id="main">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div id="content">
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
    </div>
    <div id="sidebar">
        <div class="content-placeholder">FIRST</div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder"></div>
        <div class="content-placeholder">LAST</div>
    </div>
    <div class="clear"></div>
</div>

CSS

#main {
                width: 900px;
                margin: 0 auto;
                position: relative;
            }

            #content {
                left: 0;
                position: absolute;

                width: 580px;
                height: 5000px;

                padding: 10px 10px 0 10px;

                background: #06c;

            }

            #sidebar {
                right: 0;
                position: absolute;

                width: 280px;
                padding: 10px;

                background: #eee;

            }

            .content-placeholder {
                height: 100px;

                margin: 0 0 10px 0;

                background: #ccc;
                border: 1px dashed #aaa;
            }

            .clear {
                clear: both;
            }

JavaScript

$(document).ready(function() {
                
                var origTop = $('#sidebar').offset().top;
                var origBottom = origTop + $('#sidebar').height();
                
                var scrollDir = 0;
                var scrollLast = 0;
                
                var weirdOffset = -8;
                
                $(window).scroll(function() {
                    
                    var scrollTop = $(window).scrollTop();
                    var scrollBottom = $(window).scrollTop() + $(window).height();
                    var curTop = $('#sidebar').offset().top;
                    var curBottom = curTop + $('#sidebar').height();
                    
                    if(scrollTop > scrollLast) {
                        scrollDir = 1;
                    } else if(scrollTop < scrollLast) {
                        scrollDir = 0;
                    }
                    scrollLast = scrollTop;
                    
                    if(scrollDir == 1) {
                        if(scrollBottom >= origBottom && scrollBottom >= curBottom) {
                           $('#sidebar').animate({
                               top: scrollBottom -  $('#sidebar').outerHeight() + weirdOffset
                           }, 0);
                        }
                    }
                    
                    if(scrollDir == 0) {
                        if(scrollTop <= origTop) {
                            
                            $('#sidebar').css('top', (origTop + weirdOffset) + 'px');
                            
                        } else if(scrollTop <= curTop) {
                            
                           $('#sidebar').animate({
                               top: scrollTop + weirdOffset
                           }, 0);
                           
                        }
                    }
                });
            });