JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    <div id="content">
    </div>
</div>

CSS

#page
{
    width: 500px;
    height: 3000px;
    background: #f2f6f8;
    background: -moz-linear-gradient(top,  #f2f6f8 0%, #7e8c96 50%, #132733 51%, #e0eff9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#7e8c96), color-stop(51%,#132733), color-stop(100%,#e0eff9));
    background: -webkit-linear-gradient(top,  #f2f6f8 0%,#7e8c96 50%,#132733 51%,#e0eff9 100%);
    background: -o-linear-gradient(top,  #f2f6f8 0%,#7e8c96 50%,#132733 51%,#e0eff9 100%);
    background: -ms-linear-gradient(top,  #f2f6f8 0%,#7e8c96 50%,#132733 51%,#e0eff9 100%);
    background: linear-gradient(top,  #f2f6f8 0%,#7e8c96 50%,#132733 51%,#e0eff9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 );

}

#content
{
    float: right;
    width: 250px;
    border-top: 10px solid #000;
    border-bottom: 10px solid #000;
    min-height: 800px;
    position: relative;
    background: #f4f4f4;
    background: -moz-linear-gradient(top,  #f4f4f4 0%, #e51300 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e51300));
    background: -webkit-linear-gradient(top,  #f4f4f4 0%,#e51300 100%);
    background: -o-linear-gradient(top,  #f4f4f4 0%,#e51300 100%);
    background: -ms-linear-gradient(top,  #f4f4f4 0%,#e51300 100%);
    background: linear-gradient(top,  #f4f4f4 0%,#e51300 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e51300',GradientType=0 );
}

JavaScript

var scroller = new (function() {
    var self = this;
    var element = $("#content");
    var $window = $(window);
    var prev;
    var scrollTop;
    var fixed = false;
    var topOffset;
    var bottomOffset;
                
    this.pageTopOffset = 0;
                
    this.worker = function() {
        prev = scrollTop;
        scrollTop = $window.scrollTop();
        var up = scrollTop < prev;
                    
        topOffset = Math.max(0, scrollTop);
        bottomOffset = Math.max(0, scrollTop - (element.outerHeight() - $window.height()));
                    
        var fixTop = function() {
            element.css({ 'margin-top': '', 'margin-left': '250px', 'position': 'fixed', 'bottom': '', 'top': '0px' });
        };

        var fixBottom = function() {
            element.css({ 'margin-top': '', 'margin-left': '250px', 'position': 'fixed', 'bottom': '0px', 'top': ''});
        };

        var unfixTop = function() {
            self.pageTopOffset = topOffset;
            element.css({ 'margin-left': '', 'position': 'relative',  'top': '', 'bottom':'', 'margin-top': (topOffset) + 'px' });
        };
                    
        var unfixBottom = function() {
            self.pageTopOffset = bottomOffset;
            element.css({ 'margin-left': '', 'position': 'relative',  'top': '','bottom':'', 'margin-top': (bottomOffset) + 'px' });
        };

        // first run
        if(typeof prev === 'undefined') {
            self.pageTopOffset = topOffset;
        }
                    
        if (up) {
            // scrolling up

            if (scrollTop < self.pageTopOffset) {
                // reached the top                           
                
                if (!fixed) {
                    // fix to top
                    fixTop();
                    fixed = true;
                }

            } else {
                // havent reached the top yet
                            
                if(fixed) {
                  ...