JSFiddle - React, Tailwind, and code Playground

by LukeGT

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan rhoncus viverra. Sed massa ligula, tempor eget suscipit eget, ultrices et elit. In augue eros, porta sed viverra vel, ultricies sed urna. Vestibulum sit amet augue elit, non cursus elit. Sed aliquet pretium adipiscing. Etiam nec lacus justo, ut ullamcorper velit. Etiam hendrerit diam a lorem mollis consectetur rhoncus risus convallis. Phasellus mauris sapien, feugiat at sollicitudin at, imperdiet quis diam. Praesent mattis posuere metus, id laoreet massa consequat in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc at elit risus. Donec eu metus sed dolor tempus ullamcorper quis et orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam lacinia euismod ligula, quis semper leo tristique sit amet. Sed blandit vulputate nisi.
</p>
<p id="extra">
Quisque sit amet nisl lacus, sed consectetur nulla. Proin non elit in massa euismod elementum. Morbi ut nibh lectus. Nam a ultricies arcu. Nullam ac felis a dolor consectetur volutpat non nec massa. Morbi ultricies, dui et mattis tristique, dui erat mollis nibh, sit amet feugiat enim tortor a sapien. Fusce nulla mauris, laoreet id pulvinar eu, dapibus a justo. In varius malesuada ultricies. Aenean consequat sodales orci sit amet vestibulum. Nulla auctor sollicitudin volutpat. Aliquam vel accumsan tellus. Suspendisse ultrices arcu nec lorem auctor id vestibulum nunc porttitor. Integer elementum consequat ante, eget convallis augue rutrum at. Nam egestas fringilla turpis, in consequat lorem interdum et. Suspendisse nec dolor elit, nec tristique nulla. In hac habitasse platea dictumst.
</p>
<p>
Aliquam erat volutpat. Sed quis nisl nibh. Aenean ut elit et arcu pretium eleifend. Phasellus et tempor neque. Sed eget ullamcorper felis. Vivamus dignissim, lectus nec vestibulum semper, dolor mauris egestas urna, id semper quam orci sit amet quam. Aenean vel felis et massa...

CSS

#bar {
    position: fixed;
    bottom: 0px;
    height: 30px;
    width: 100%;
    border: 1px solid #000;
    background: white;
}
#extra {
    display:none;
}

JavaScript

$(window).scroll(function() {

    $('#bar').css('position', 'static');
    console.log($('#bar').position().top);
    console.log($(window).scrollTop() + $(window).height());

    if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) {
        $('#bar').css('position', 'fixed');
    }
});

setTimeout(function() {
    $('#extra').show();
}, 1000);