JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/661006/waypoints.js"></script>
<div id="container">
    <div id="header"></div>
    
    <div id="main">      
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in mollis dui, sollicitudin elementum elit. Morbi lorem arcu, auctor non urna ullamcorper, malesuada mollis dolor. Suspendisse ac magna vitae mauris tincidunt rhoncus eu faucibus dui. Aliquam adipiscing mattis enim nec consequat. Phasellus adipiscing ullamcorper dolor, non gravida tortor facilisis posuere. Vivamus sed iaculis erat, sit amet sagittis lacus.</p>
    <p>Integer eleifend lorem mauris, id hendrerit leo porttitor ac. Donec ac ligula vitae metus imperdiet pellentesque. Suspendisse posuere consectetur nibh, et posuere libero lacinia ac. Nullam eu eros pharetra, tincidunt metus dapibus, imperdiet arcu. Aliquam rhoncus sagittis risus, vitae feugiat nisi posuere sit amet. Morbi vulputate dui turpis, et malesuada lorem ornare non. Nullam interdum tortor quis ipsum fringilla, nec tempus erat feugiat. In dictum elit eget justo viverra porttitor. Phasellus consequat eleifend ipsum ac pharetra.</p>
    <p>Curabitur ligula lorem, pellentesque sit amet vestibulum in, euismod quis dui. Quisque nec tempor arcu. Donec a est aliquet, pretium quam quis, imperdiet leo. Aliquam quis velit et sem commodo volutpat nec in tortor. Phasellus sit amet porttitor quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in leo vel enim vehicula adipiscing. Donec ultricies metus eu neque viverra vulputate.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in mollis dui, sollicitudin elementum elit. Morbi lorem arcu, auctor non urna ullamcorper, malesuada mollis dolor. Suspendisse ac magna vitae mauris tincidunt rhoncus eu faucibus dui. Aliquam adipiscing mattis enim nec consequat. Phasellus adipiscing ullamcorper dolor, non gravida tortor facilisis posuere. Vivamus sed iaculis erat, sit amet sagittis...

CSS

body {
    background: #ccc; }

p {
    font-size: 16px;
    padding: 20px;
    color: #fff;
}

#container {
    background: #fff;
    margin: 0 auto;
    width: 500px; }

#header {
    background: red;
    width: 100%;
    height: 100px; }

#main {
    float: left;
    background: blue;
    width: 65%; }

#sidebar {
    float: right;
    background: green;
    width: 35%;
    overflow: hidden; }

#sidebar.scrollable {
    overflow-y: scroll; }

JavaScript

var mouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x

if (document.attachEvent) { //if IE (and Opera depending on user setting) 
    document.attachEvent("on"+mouseWheelEvent, mouseWheelEventHandler);
} else if (document.addEventListener) { //WC3 browsers 
    document.addEventListener(mouseWheelEvent, mouseWheelEventHandler, false);
}

var sidebar = $('#sidebar');
sidebar.height( $('#main').height() );

$('#main').waypoint(function() {
    sidebar.toggleClass('scrollable'); 
}, { offset: 'bottom-in-view' });

function mouseWheelEventHandler(e)
{
    if( !sidebar.hasClass('scrollable') && !sidebar.is(":hover") ) {
        return true;
    }
    
    var event = window.event || e; //equalize event object
    var delta = event.detail ? event.detail*(-120) : event.wheelDelta; //check for detail first so Opera uses that instead of wheelDelta
    sidebar.scrollTop(sidebar.scrollTop()-delta);        
}