Sidebar scrolls then sticks.

Copy of http://jsfiddle.net/dKDJz/2/

by burhans

HTML

<div id="horizon">
    <div id="wrapper">
        <div id="header">header</div>
        <div id="content-wrapper">
        <div id="content">
        <h1>Latest Posts</h1>
        <div class="post">This is a post</div>
        <div class="post">This is a post</div>
        <div class="post">This is a post</div>
        <div class="post">This is a post</div>
        <div class="post">This is a post</div>
        <div class="post">This is a post</div>
        <div class="post">This is a post</div>
        <div class="post">This is a post</div>
        <div class="post">This is a post</div>
        <div class="post">This is a post</div>
        </div>
        <div id="sidebar">
        <h2>Sidebar</h2>
        <ul class="buttons">
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
        <li>Button 4</li>
        <li>Button 5</li>
        <li>Button 6</li>
        <li>Button 7</li>
        <li>Button 8</li>
        <li>Button 9</li>
        <li>Button 10</li>
        <li>Button 11</li>
        <li>Button 12</li>
        <li>Button 13</li>
        <li>Button 14</li>
        <li>Button 15</li>
        <li>Button 16</li>
        <li>Button 17</li>
        <li>Button 18</li>
        </ul>
        </div>
        </div>
        <div id="footer">footer</div>
    </div>
</div>

CSS

h1, h2 {
    display: block;
    font-weight: bold;
}

#horizon {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #cccccc;
    overflow: hidden;    
}

#header, #footer {
    width: 480px;
    height: auto;
    overflow: hidden;
    background: teal;
    padding: 10px;
    color: #ffffff;
}

#wrapper {
    width: 500px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
}

#content-wrapper {
    width: 100%;
    height: auto;
    overflow: hidden:
}

#content {
    width: 330px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    float: left;
    padding: 10px;
}

#sidebar {
    width: 130px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    float: left;
    clear: right;
    padding: 8px;
    background: #e5e5e5;
    border: 2px dashed red;
}

.fixed {
    margin-left: 350px !important;
position: fixed;
 top: 0;   
}

.post {
    margin: 5px;
    width: 320px;
    background: red;
    float: none;
    overflow: hidden;
    min-height: 175px
}

.buttons li {
    margin: 5px;
    width: 120px;
    background: blue;
    float: none;
    overflow: hidden;
    min-height: 20px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
}

.buttons li:hover {
    background: lightblue;
}

JavaScript

var $sidebar   = $("#sidebar"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.addClass('fixed');
        } else {
            $sidebar.removeClass('fixed');
        }
    });