JSFiddle - React, Tailwind, and code Playground

by jaceju

HTML

<div class="wrapper">
    <div class="outer-fixed">
        <h2>Outer Fixed</h2>
    </div>
    <article class="content">
        <h1>Hello World</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula ultrices quam, aliquam interdum ex interdum sed. In hac habitasse platea dictumst. Aenean sodales, nibh vel consectetur tristique, quam dolor efficitur lectus, a convallis ante nibh eu erat. Nulla dignissim lectus aliquam nisi pulvinar consequat. Aenean sed hendrerit ligula. Nulla facilisi. Aliquam iaculis gravida justo, ac placerat nunc gravida nec.</p>
        <div class="sticky">
            <h2>Sticky</h2>
        </div>
        <p>Phasellus iaculis odio nulla, ut mollis tellus facilisis interdum. Sed in laoreet orci, accumsan aliquam augue. Vestibulum feugiat odio justo, et pharetra nibh maximus id. In cursus lorem nec purus malesuada, a congue neque posuere. Ut dui lorem, aliquam vitae libero sit amet, feugiat porttitor turpis. Fusce blandit velit quis arcu ornare finibus. Aenean hendrerit nibh nec libero accumsan dapibus. Fusce quis risus vitae sapien volutpat pretium. Nullam nec enim eu justo porta convallis. Fusce a tempus eros. Etiam et efficitur turpis, id accumsan massa. Nullam congue sem rhoncus felis sagittis facilisis. Ut quis ornare nisl. Fusce lectus orci, eleifend nec quam ut, tempus aliquam libero.</p>
        <div class="inner-fixed">
            <h2>Inner Fixed</h2>
        </div>
        <p>Sed feugiat condimentum metus et ultrices. Etiam sagittis velit vitae leo mattis varius. Pellentesque rhoncus dapibus justo, quis vulputate leo consectetur ac. Donec quis viverra sem, eu malesuada metus. Pellentesque consequat lectus sit amet ligula sagittis, at tempus mi vulputate. Ut fermentum aliquet posuere. Nullam sodales, eros et hendrerit consectetur, orci urna sodales urna, vitae consectetur ante metus sed libero. Vestibulum diam ligula, molestie nec sem sit amet, posuere lobortis arcu. Quisque posuere lorem id ligula...

CSS

* {
box-sizing: border-box;
}
.wrapper {
position: relative;
width: 500px;
margin: 0 auto;
}
.content, .sticky, .outer-fixed, .inner-fixed {
padding: 0.5em;
line-height: 1.5;
border: 1px solid #CCC;
}
h1, h2 {
margin: 0;
padding: 0;
text-align: center;
}
.content {
position: relative;
width: 100%;
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sticky {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 4em;
color: #a94442;
border-color: #ebccd1;
background-color: #f2dede;
z-index: 1;
}
.outer-fixed {
position: fixed;
top: 30px;
left: 0;
width: 400px;
height: 4em;
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
z-index: 1000;
}
.inner-fixed {
position: fixed;
top: 100px;
left: 0;
width: 400px;
height: 4em;
color: #3c763d;
border-color: #d6e9c6;
background-color: #dff0d8;
z-index: 1;
}

JavaScript

/*!
 * Stickyfill -- `position: sticky` polyfill
 * v. 1.1.1 | https://github.com/wilddeer/stickyfill
 * Copyright Oleg Korsunsky | http://wd.dizaina.net/
 *
 * MIT License
 */
!function(a,b){function c(){y=D=z=A=B=C=K}function d(a,b){for(key in b)b.hasOwnProperty(key)&&(a[key]=b[key])}function e(a){return parseFloat(a)||0}function f(){F={top:b.pageYOffset,left:b.pageXOffset}}function g(){return b.pageXOffset!=F.left?(f(),void z()):void(b.pageYOffset!=F.top&&(f(),i()))}function h(){setTimeout(function(){b.pageYOffset!=F.top&&(F.top=b.pageYOffset,i())},0)}function i(){for(var a=H.length-1;a>=0;a--)j(H[a])}function j(a){if(a.inited){var b=F.top<=a.limit.start?0:F.top>=a.limit.end?2:1;a.mode!=b&&p(a,b)}}function k(){for(var a=H.length-1;a>=0;a--)if(H[a].inited){var b=Math.abs(t(H[a].clone)-H[a].docOffsetTop),c=Math.abs(H[a].parent.node.offsetHeight-H[a].parent.height);if(b>=2||c>=2)return!1}return!0}function l(a){isNaN(parseFloat(a.computed.top))||a.isCell||(a.inited=!0,a.clone||q(a),"absolute"!=a.parent.computed.position&&"relative"!=a.parent.computed.position&&(a.parent.node.style.position="relative"),j(a),a.parent.height=a.parent.node.offsetHeight,a.docOffsetTop=t(a.clone))}function m(a){var b=!0;a.clone&&r(a),d(a.node.style,a.css);for(var c=H.length-1;c>=0;c--)if(H[c].node!==a.node&&H[c].parent.node===a.parent.node){b=!1;break}b&&(a.parent.node.style.position=a.parent.css.position),a.mode=-1}function n(){for(var a=H.length-1;a>=0;a--)l(H[a])}function o(){for(var a=H.length-1;a>=0;a--)m(H[a])}function p(a,b){var c=a.node.style;switch(b){case 0:c.position="absolute",c.left=a.offset.left+"px",c.right=a.offset.right+"px",c.top=a.offset.top+"px",c.bottom="auto",c.width="auto",c.marginLeft=0,c.marginRight=0,c.marginTop=0;break;case 1:c.position="fixed",c.left=a.box.left+"px",c.right=a.box.right+"px",c.top=a.css.top,c.bottom="auto",c.width="auto",c.marginLeft=0,c.marginRight=0,c.marginTop=0;break;case...