JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topstickie" class="stickie"></div>
<div>
    <p style="font-size:35px;">(scroll down to see the editor)</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare viverra dolor, vitae ornare diam varius at. Morbi malesuada maximus fermentum. Sed consequat vestibulum nisi, ac dapibus elit convallis a. Ut hendrerit consequat turpis, sed vehicula risus convallis non. Duis in hendrerit quam, a rhoncus risus. Nam commodo varius eros, sit amet mollis turpis dapibus ut. Nunc ac posuere nisl. Nunc lacinia, dolor ut placerat sollicitudin, nulla ipsum condimentum justo, et auctor felis ante vitae enim.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare viverra dolor, vitae ornare diam varius at. Morbi malesuada maximus fermentum. Sed consequat vestibulum nisi, ac dapibus elit convallis a. Ut hendrerit consequat turpis, sed vehicula risus convallis non. Duis in hendrerit quam, a rhoncus risus. Nam commodo varius eros, sit amet mollis turpis dapibus ut. Nunc ac posuere nisl. Nunc lacinia, dolor ut placerat sollicitudin, nulla ipsum condimentum justo, et auctor felis ante vitae enim.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare viverra dolor, vitae ornare diam varius at. Morbi malesuada maximus fermentum. Sed consequat vestibulum nisi, ac dapibus elit convallis a. Ut hendrerit consequat turpis, sed vehicula risus convallis non. Duis in hendrerit quam, a rhoncus risus. Nam commodo varius eros, sit amet mollis turpis dapibus ut. Nunc ac posuere nisl. Nunc lacinia, dolor ut placerat sollicitudin, nulla ipsum condimentum justo, et auctor felis ante vitae enim.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare viverra dolor, vitae ornare diam varius at. Morbi malesuada maximus fermentum. Sed consequat vestibulum nisi, ac dapibus elit convallis a. Ut hendrerit consequat turpis, sed vehicula risus convallis non. Duis in hendrerit quam, a rhoncus risus. Nam...

CSS

#topstickie {
    position:fixed;
    top: 0px;
}
#editorstickie {
    margin-bottom:-16px;
}
.stickie {
    width:100%;
    height:1px;
    background-color: rgb(231,76, 60);
    -webkit-box-shadow: 0 0 50px rgb(231,76, 60);
    z-index:9999;
    -webkit-transition: opacity 0.3s ease-in;
    opacity: 0;
}
.visible {
    opacity: 1 !important;
}
#toolbar {
    height: 37px;
    background-color: black;
    color: white;
    top: 50px;
    -webkit-transition: opacity 0.3s ease-in, width 0.3s ease-in, box-shadow 1s ease-in;  
    -webkit-user-drag: element;
    z-index: 100;
    overflow: hidden;
    outline: 1px solid rgb(231,76, 60);
}

#dragger {
    float:left;
    background-image: url('http://i.imgur.com/rYKogmb.png');
    width: 16px;
    height: 37px;
    -webkit-user-drag: element;
}

#dragger:hover{
    cursor: move;
}

 
#mock {
    background-image: url('http://i.imgur.com/zLmUtIS.png');
    width: 910px;
    height: 37px;
    background-position: left center;
    margin-left: 16px;
}



.docking{
}
.pinned {
    position: absolute;
}
.unpinned {
    position: fixed;
    box-shadow: 3px 3px 10px #888888;
}
#lipsum {
    background-color:white;
    outline: 1px solid rgb(231,76, 60);
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#tbinfo {
    float: right;
}

JavaScript

var offset = $('#lipsum')[0].offsetTop;
var toolbarHeight = $('#toolbar').height();
var ghostImg = document.createElement("img");
ghostImg.src = "http://1x1px.me/FF4D00-0.0.png";

var pinned = true;
var lastDiff = 0;

/* "Pins" the editor to the top of the editor element (or the top of the screen, 
 * depending on scroll
 */
var setPinned = function (state) {
    pinned = state;
    if (state) {
        $('#toolbar').removeClass('unpinned');
        $('#toolbar').addClass('pinned');
        //$('#pininfo').text('pinned');
        pinscroll();
    } else {
        var reltop = $('#toolbar')[0].offsetTop - $(window).scrollTop();
        $('#toolbar').css('top', reltop + 'px');
        $('#toolbar').removeClass('pinned');
        $('#toolbar').addClass('unpinned');
        //$('#pininfo').text('unpinned');
    }
};

/* Executed when the editor is "pinned" and there is a scroll event
 * decides whether to make the toolbar stick to the top of the screen,
 * or the top of the editor element 
 */
var pinscroll = function () {
    var scrolltop = $(window).scrollTop();
    var toolbartop = offset - toolbarHeight;

    if (toolbartop > scrolltop) {
        $('#toolbar').css('top', toolbartop + 'px');
        dockToEditorAnim();
    } else {
        $('#toolbar').css('top', scrolltop + 'px');
        dockToTopAnim();
    }
    
   

};


var dockToTopAnim = function(){ 
    $('#toolbar').addClass('docking');
     var left = $('#lipsum')[0].offsetLeft;
    $('#toolbar').css('left', left + 'px');
   
}

var dockToEditorAnim = function(){
    $('#toolbar').addClass('docking');
    $('#toolbar').css('width', $('#lipsum').width());
    var left = $('#lipsum')[0].offsetLeft;
    $('#toolbar').css('left', left + 'px');
}

/* returns true if any part of the editor can be seen in the current 
 * viewPort 
 */
var isEditorVisible = function () {
    var scrolltop = $(window).scrollTop();
    var winheight = $(window).height();
    var edHeight = $('#lipsum')[0].clientHeight;
    var...