JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/28036393/scrollable-sidebar-when-scrolling-main-content-div/28036710

by Augustus Yuan

HTML

<body>
    <div id="Content">
        <div class="inner">
            <ul>
                <li>Home</li>
                <li>Page 1</li>
                <li>Page 2</li>
                <li>Page 3</li>
            </ul>
        </div>
    </div>
    <div id="Main"></div>
</body>

CSS

body {
    position: relative;
    margin: 0;
}

#Content
{
    bottom: 0;
    left: 0;
    min-width: 200px;
    overflow-y: scroll;
    position: fixed;
    height: 100%;
    top: 0;
    width: 50px;
    background: red;
}

.inner {
    height: 1000px;
}

#Main
{
    width: 63%;
    height: 1000px;
    background: black;
}

JavaScript

$(window).scroll(function(e) {
    $('#Content').animate({
        scrollTop: $(this).scrollTop()
    }, 0);
});