JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
<div id="stick-here"></div>
<div id="stickThis">Sticky note</div>
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />

CSS

#stickThis {
    padding: 5px;
    background-color: #ccc;
    font-size: 1.5em;
    width: 300px;
    text-align: center;
    font-weight: bold;
    border: 2px solid #444;
    border-radius: 10px;
}
.stick {
    margin-top: 0;
    position: fixed;
    top: 0;
    z-index: 9999;
    border-radius: 0 0 10px 10px;
}

JavaScript

function sticktothetop() {
    var window_top = $(window).scrollTop();
    var top = $('#stick-here').offset().top;
    if (window_top > top) {
        $('#stickThis').addClass('stick');
        $('#stick-here').height($('#stickThis').outerHeight());
    } else {
        $('#stickThis').removeClass('stick');
        $('#stick-here').height(0);
    }
}
$(function() {
    $(window).scroll(sticktothetop);
    sticktothetop();
});