JSFiddle - React, Tailwind, and code Playground

by moogs

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo velit, hendrerit id dolor id, porttitor tristique ipsum. Sed malesuada nisi hendrerit nunc eleifend egestas. Nunc mattis id ex a fermentum. Vivamus tortor velit, pulvinar sed rhoncus quis, ornare eget lorem. Mauris varius ullamcorper pretium. Sed dui ligula, laoreet et porta eu, rhoncus at elit. Fusce interdum mauris ut nunc euismod volutpat. Maecenas tempus, ex nec auctor ultricies, turpis odio viverra odio, sit amet iaculis leo turpis ut est. Duis viverra mattis aliquet. Fusce sapien odio, maximus vel iaculis a, auctor ac purus. Ut id porttitor dolor.</p>
<div id="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo velit, hendrerit id dolor id, porttitor tristique ipsum. Sed malesuada nisi hendrerit nunc eleifend egestas. Nunc mattis id ex a fermentum. Vivamus tortor velit, pulvinar sed rhoncus quis, ornare eget lorem. Mauris varius ullamcorper pretium. Sed dui ligula, laoreet et porta eu, rhoncus at elit. Fusce interdum mauris ut nunc euismod volutpat. Maecenas tempus, ex nec auctor ultricies, turpis odio viverra odio, sit amet iaculis leo turpis ut est. Duis viverra mattis aliquet. Fusce sapien odio, maximus vel iaculis a, auctor ac purus. Ut id porttitor dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo velit, hendrerit id dolor id, porttitor tristique ipsum. Sed malesuada nisi hendrerit nunc eleifend egestas. Nunc mattis id ex a fermentum. Vivamus tortor velit, pulvinar sed rhoncus quis, ornare eget lorem. Mauris varius ullamcorper pretium. Sed dui ligula, laoreet et porta eu, rhoncus at elit. Fusce interdum mauris ut nunc euismod volutpat. Maecenas tempus, ex nec auctor ultricies, turpis odio viverra odio, sit amet iaculis leo turpis ut est. Duis viverra mattis aliquet. Fusce sapien odio, maximus vel iaculis a, auctor ac purus. Ut id porttitor dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec...

CSS

#box {
    height: 20px;
    width: 20px;
    background: red;
}
.stick {
    position: fixed;
    top: 0;
}

JavaScript

function ready() {
    var box = document.getElementById('box');
    var top = box.offsetTop;

    function scroll(event) {
        var y = document['documentElement' || 'body'].scrollTop;

        if (y >= top) box.classList.add('stick');
        else box.classList.remove('stick');

    }

    window.addEventListener('scroll', scroll);
}

if (document.readyState == 'complete' || document.readyState == 'loaded') {
    ready();
} else {
    window.addEventListener('DOMContentLoaded', ready);
}