JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="header">My float header</div>
<h1>My page header</h1>
<div id="base">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut ante diam, eget lobortis felis. Donec ultricies faucibus leo eget condimentum. Nulla et felis nulla, facilisis tincidunt neque. Aliquam nisi sapien, gravida nec pellentesque a, aliquet id sem. Ut vitae velit elit, a tincidunt odio. Maecenas aliquet ultrices velit, id egestas lectus sollicitudin eget. Nam congue tellus a augue vulputate malesuada. Suspendisse vitae sodales augue. Vestibulum pretium ullamcorper nibh sit amet pellentesque. Nam a nisl ac tortor auctor pulvinar a vel nisl. Fusce eget elementum quam. Ut mauris nisi, pellentesque vitae tempor in, tempor non metus. Fusce sed enim mi. Nam porttitor varius mauris et luctus. Maecenas ultrices erat vitae erat sollicitudin quis mattis nunc euismod. Donec at ligula justo. Aenean egestas, lacus eu lacinia tincidunt, velit mauris ultrices dolor, nec dictum eros augue tincidunt dolor. Sed egestas erat in mauris tristique at ultrices orci aliquet.
</p>
<p>
Integer est elit, scelerisque et iaculis eget, suscipit ac nibh. Maecenas nec lacus tortor, non fringilla ipsum. Ut interdum mollis mauris, id iaculis tortor malesuada eget. In molestie neque eu mi eleifend ac eleifend augue gravida. Pellentesque gravida posuere magna, at viverra enim euismod sit amet. Maecenas ornare justo at diam volutpat bibendum. Nunc nisi magna, laoreet vitae convallis quis, varius pharetra quam. Phasellus volutpat hendrerit est, a posuere neque dapibus vel. Quisque tempus egestas nisl, at pellentesque ipsum sollicitudin et. Vivamus vel nisi ac mi commodo vulputate vitae sit amet augue. Vestibulum auctor ipsum ac enim faucibus ut scelerisque diam venenatis. Praesent imperdiet, odio non accumsan euismod, lectus quam pellentesque leo, vel iaculis elit purus nec mauris. Sed quis magna neque, sed convallis libero. Nullam hendrerit egestas magna. Sed eget placerat augue. Proin sodales rutrum...

CSS

#header{display:none; position: fixed; top:0px;
    width: 100%; background-color: red; 
    border: 1px solid black;}
h1{font-size: 130%; padding-bottom:1ex;}

JavaScript

$(window).scroll(function(){
    var top = $(window).scrollTop();
if(top==0)
  $('#header').slideUp('fast')
else
  $('#header').slideDown('fast');
    })