JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="spacer"></div>
<div id="stickThis">
  Sidebar
</div>
<div id="stick-here"></div>.
<div class="spacer"></div>

CSS

.spacer {
  height: 200vh;
}
#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;
}
#stickThis.stick {
    margin-top: 0;
    position: fixed;
    bottom: 22px;
    z-index: 9999;
    border-radius: 0 20px 20px 0px;
}

JavaScript

function sticktothebottom() {
    var h = window.innerHeight;
    var window_top = $(window).scrollTop();
    var top = $('#stick-here').offset().top;
    var panelh = $("#stickThis").height();
    if (window_top + h > top + 22) {
        $('#stickThis').addClass('stick');
        $('#stick-here').height($('#stickThis').outerHeight());
    } 
    if (window_top + top < panelh + (22 * 2)) {
        $('#stickThis').removeClass('stick');
        $('#stick-here').height(0);
    }
}
$(function() {
    $(window).scroll(sticktothebottom);
    sticktothebottom();
});