JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<h2>Intense Scrolling Page!</h2>
<div id="navbar">
  <ul><li>I'm a navbar</li><li>Just Pretend</li></ul>
</div>
<div id="fixbar">I'm the bar that stays fixed at the top</div>
<div id="scrollcontainer">
    <div id="scrollpane1" class="scrollpane">
        <p>Ennui whatever pork belly mumblecore, shoreditch +1 trust fund narwhal cliche cray. Vegan raw denim 8-bit forage, keffiyeh mixtape scenester street art williamsburg PBR narwhal readymade occupy ennui banksy. Yr raw denim beard +1 art party narwhal.
    </div>
    <div id="scrollpane2" class="scrollpane">
<p>Gluten-free occupy photo booth, truffaut pork belly echo park narwhal kale chips. Direct trade fingerstache whatever, williamsburg tattooed mumblecore bicycle rights. Wolf direct trade mixtape, artisan truffaut keytar helvetica bespoke high life chillwave biodiesel. Pitchfork organic high life williamsburg, vegan semiotics bushwick keffiyeh flexitarian selvage sartorial. Authentic quinoa pickled fanny pack american apparel, squid mumblecore. Quinoa pop-up stumptown, locavore cliche 3 wolf moon master cleanse photo booth chillwave aesthetic yr mcsweeney's williamsburg etsy +1. Sartorial truffaut trust fund, you probably haven't heard of them leggings mumblecore salvia sriracha jean shorts cliche small batch.

    </div>
    <div id="scrollpane3" class="scrollpane">
        <p>Godard cardigan tofu pickled mlkshk. Yr sartorial tattooed, keffiyeh brooklyn brunch irony master cleanse wolf organic chambray skateboard. Four loko 3 wolf moon hella, master cleanse irony portland food truck vice. High life organic etsy, chillwave pork belly fingerstache vegan brunch put a bird on it before they sold out mixtape. Wayfarers viral sartorial, Austin leggings cardigan wes anderson farm-to-table carles butcher mumblecore truffaut gastropub. Banksy typewriter banh mi, authentic pop-up put a bird on it twee kogi gluten-free etsy. Polaroid whatever street art cosby sweater cray, PBR farm-to-table swag mcsweeney's mlkshk...

CSS

body, html { height: 100%; width:100%; }
h2 { font-size:2em; font-weight: bold; padding: 1em; background: #cce; }
#navbar { background: #77a; }
#navbar li { display: inline-block; padding: 1em; }
#fixbar { position: absolute; z-index: 9; height: 50px; width: 100%; border: 2px solid #333; background: #444; color: #fff; }
#scrollcontainer { position: static; border: 1px solid blue; padding-top: 54px; }
.scrollpane { position: absolute; padding: 10px; background: rgba(255,0,0,.3); width: 178px; border: 1px solid red; }
#scrollpane2 { left: 200px; }
#scrollpane3 { left: 400px; }
#footer { color: blue; background: green; padding: 1em; height: 150px; }
/*
#counter { position: fixed; top: 50px; right: 0px; color: red; background: white; }
*/

JavaScript

//just ignore this
var hipsum = function(el){ $.getJSON('http://hipsterjesus.com/api/', {paras:Math.random()*3+1,type:'hipster-centric'}, function(data) { el.html(data.text); container.height(Math.max(el.height(), container.height())); })};

//hipsum(sp1);
//hipsum(sp2);
//hipsum(sp3);
//carry on
    
var heights = $(".scrollpane").map(function(){
    return $(this).outerHeight();
}).get();
    
var maxHeight = Math.max.apply(null, heights);

$('#scrollcontainer').height(maxHeight);

var $window = $(window),
    fixbar = $('#fixbar'),
    sp1 = $('#scrollpane1'),
    sp2 = $('#scrollpane2'),
    sp3 = $('#scrollpane3'),
    scrollPanes = $('.scrollpane'),
    windowScrolled = false,
    oldScrollTop = 0,
    container = $('#scrollcontainer'),
    containerTop,
    containerBottom,
    paneTop,
    fixedEls = {};

containerTop = container.offset().top;
containerBottom = containerTop + container.outerHeight();
panesTop = containerTop + fixbar.outerHeight();

var fix = function(el, id, top){
    if(!fixedEls[id]){
        top = top || 'auto';
        if(el instanceof jQuery)
            el.css({position: 'fixed', top: top});
        else{
            el.style.position = 'fixed';
            el.style.top = top;
        }
        fixedEls[id] = true;
    }
},
unfix = function(el, id, top){
    if(fixedEls[id]){
        top = top || 'auto';
        if(el instanceof jQuery)
            el.css({position: 'absolute', top: top});
        else{
            el.style.position = 'absolute';
            el.style.top = top;
        }
        fixedEls[id] = false;
    }
};

//var count = 0, counter = $('#counter span');
$(window).scroll(function(){
    windowScrolled = true;
    //counter.html(++count);
});

setInterval(function(){
    if (!windowScrolled){
        return;
    }
    else windowScrolled = false;
    
    var scrollTop = $window.scrollTop();
    var delta = scrollTop - oldScrollTop,
        scrollBottom = scrollTop + $window.height();
    oldScrollTop =...