JSFiddle - React, Tailwind, and code Playground

by mikeys4u

HTML

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
   
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
    tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
    porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi....

CSS

#sticky {
    /*padding: 0.5ex;*/
    width: 100%;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    padding: 10px;
    /*border-radius: 0.5ex;*/
}
#sticky.stick {
    position: fixed;
    top: 0px;
    z-index: 10000;
    /*border-radius: 0 0 0.5em 0.5em;*/
}

body {
    margin: 0;
    }

JavaScript

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
//]]>