JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div>
    <div class="survey-container">A</div>
</div>

CSS

body {
    height: 2000px;
}
.survey-container {
    height: 100px;
    width: 100%;
    display: block;
    background-color: green;
    position: fixed;
    bottom: 0;
    transition: bottom 0.5s ease-in-out;
}
.survey--state-down {
    bottom: 0px;
}
.survey--state-up {
    bottom: -300px;
}

JavaScript

var lastScrollTop = 0;
$(window).scroll(function (event) {
    var sc = '.survey-container';
    var st = $(this).scrollTop();
    
    if (st > 0) {
        if (st > lastScrollTop) {
            // downscroll code
            $(sc).removeClass('survey--state-down');
            $(sc).addClass('survey--state-up')
        } else {
            // uproll code
            $(sc).removeClass('survey--state-down');
            $(sc).removeClass('survey--state-up');
        }
    } else {
        $(sc).removeClass('survey--state-up');
        $(sc).addClass('survey--state-down')
    }
    lastScrollTop = st;
});