JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<div class="topin">hello</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum varius euismod. Ut et mattis ligula, sit amet malesuada odio. Fusce ultrices feugiat elit, eu ullamcorper felis cursus convallis. Proin fringilla, purus non rutrum sagittis, turpis dui feugiat arcu, quis placerat tellus nunc non orci. Nullam consequat dictum faucibus. Sed feugiat mattis ornare. Mauris quis egestas mi, vitae lobortis lectus. Ut ullamcorper ac dolor nec vulputate. Phasellus ullamcorper erat ligula, ut viverra justo mattis quis. Donec luctus, lectus quis commodo pharetra, mi tellus sodales dui, a tincidunt sapien sem quis erat. Pellentesque dui arcu, blandit ac massa nec, tincidunt fringilla felis. Nunc venenatis sit amet nisl a sollicitudin. Quisque iaculis felis in libero ornare ullamcorper. Quisque varius tortor ac consequat hendrerit. Vivamus tincidunt lobortis leo id ultrices. Maecenas ac iaculis velit, condimentum tristique metus. Aliquam accumsan feugiat egestas. Fusce semper massa quis cursus gravida. Donec euismod a arcu id feugiat. Donec luctus libero eget bibendum tristique. Morbi ac quam quis sem iaculis imperdiet sit amet eget nunc. Proin quis dui vel diam fringilla eleifend vitae quis ligula. Aliquam eget fringilla massa, sit amet rutrum libero. Aliquam erat volutpat. Vestibulum et eros accumsan, aliquam tortor vitae, sagittis felis. Sed orci dolor, bibendum posuere nisi in, tempor euismod magna. Suspendisse viverra, libero a consectetur convallis, dolor orci varius leo, vel viverra arcu nulla at orci. Nulla commodo imperdiet convallis. Etiam sit amet dolor lacus. Phasellus lacinia porttitor turpis id imperdiet. Fusce nec nisl augue. Ut mauris neque, vestibulum gravida luctus sit amet, elementum sit amet felis. Proin mi nibh, luctus quis commodo quis, vestibulum in turpis. Donec aliquam ligula et elit vehicula placerat. Vivamus in dui convallis, porttitor turpis at, accumsan erat. Duis suscipit nulla mauris, in facilisis nunc...

CSS

.topin {
    position:fixed;
    top:0;
    left:0;
    background:black;
    color:white;
    padding:10px;
}

JavaScript

var f = $;
var element = f('.topin');
f(window).scroll(function () {
    setTimeout(function () {
        element['fade' + (f(this).scrollTop() > 150 ? 'Out' : 'In')](1000);
    }, 1000);
});