JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="header"><h1>Simple 2 column CSS layout, final layout</h1></div>
    <div id="nav">
        <ul>
            <li><a href="http://jobingarena.com/">Option 1</a></li>
            <li><a href="http://jobingarena.com/">Option 2</a></li>
            <li><a href="http://jobingarena.com/">Option 3</a></li>
            <li><a href="http://jobingarena.com/">Option 4</a></li>
            <li><a href="http://jobingarena.com/">Option 5</a></li>
        </ul>
    </div>
    <div id="main">
        <div style="clear: both;"></div>        
        <!--SIDE HANGER -->
        
        <div id="HangerLeft">
            <div id="scrollWrapper">
                <div class="" id="scrollBox">
                    <div id="mainContainer">
                        <div id="shareContainer">
                            <div class="moduleShareHeader">SCROLL BOX</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- SIDE HANGER -->
        
        
        <h2>Column 1</h2>
        <p><a href="http://jobingarena.com/">456 Berea Street Home</a></p>
        
        <p><a href="http://jobingarena.com/lab/developing_with_web_standards/csslayout/2-col/">Simple 2 column CSS layout</a></p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris 
            vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel,
            elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing 
            mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis 
            natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
            mus.</p>
        <p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, 
            consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis 
            natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
            mus. Donec semper ipsum et urna....

CSS

body,
html {
    margin:0;
    padding:0;
    color:#000;
    background:#a7a09a;
}
#wrap {
    width:750px;
    margin:0 auto;
    background:#99c;
}
#header {
    padding:5px 10px;
    background:#ddd;
}
h1 {
    margin:0;
}
#nav {
    padding:5px 10px;
    background:#c99;
}
#nav ul {
    margin:0;
    padding:0;
    list-style:none;
}
#nav li {
    display:inline;
    margin:0;
    padding:0;
}
#main {
    float:left;
    width:480px;
    padding:10px;
    background:#9c9;
    height:1500px;
}
h2 {
    margin:0px 0px 1em;
}
#sidebar {
    float:right;
    width:230px;
    padding:10px;
    background:#99c;
}
#footer {
    clear:both;
    padding:5px 10px;
    background:#cc9;
}
#footer p {
    margin:0px;
}
* html #footer {
    height:1px;
}

/** modified this **/    
#HangerLeft {
    top: 100px;
}

#scrollWrapper {
    width: 130px;
}

#scrollBox {
    position: relative;
    z-index: 10;
}

#mainContainer {
    width:120px;
    border: 1px solid #999999;
    padding:0px;
    margin-top:10px;
    background-color:#ffffff;
    height:300px;
}


#shareContainer {
    height:22px;
    padding: 0px;
    margin:0px 0px 3px 0px;
}


.moduleShareHeader {
    background:url("http://coyotes.nhl.com/v2/images/headerGradient.gif") repeat-x scroll 50% 50% #07192F;
    color:#FFFFFF;
    float:left;
    font-family:arial;
    font-size:14px;
    font-weight:bold;
    height:22px;
    margin:0px;
    padding:2px 0 0 10px;
    width:110px;
}

JavaScript

function setupScrollBox() {

    var hanger = $("#HangerLeft"),
        position = $("#wrap").offset();

    hanger.css({
        position: 'absolute',
        left: position.left - $("#scrollWrapper").outerWidth(),
        marginTop: '25px'
    });

}


$(document).ready(function() {
    // check if IE6
    var msie6 = $.browser.msie && $.browser.version < 7;

    setupScrollBox();

    // attach resize event to window 
    $(window).resize(function() {
        setupScrollBox();
    });

    // check browser
    if (!msie6) {
        // attach scroll event     
        $(window).scroll(function(event) {
            // get scroll position and cache element so we only access it once
            var y = $(this).scrollTop(),
                wrap = $('#HangerLeft');

            // if scroll position is greater than 100 adjust height else do nothing
            if (y > 100) 
                wrap.stop().animate({
                top: y
            }, 250);
            //wrap.css('top', y+'px');
        });
    }
});