JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div class="container">
    <div class="header">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
    <div class="content_wrapper">
        <div class="swipe">
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
    </div>
    <div class="footer"></div>
</div>

CSS

body {
    margin:0px;
    padding:0px;
    background:#f3f3f3;
    overflow:hidden;
}
.container {
    position:relative;
}
.content_wrapper {
    padding:15px 15px 0px 15px;
    overflow-x:auto;
    height:100vh;
    display:block;
}
.swipe{
    float:left;
    width:100%;
}
.content {
    float:left;
    width:100%;
    height: 450px;
    background:white;
    margin-bottom: 15px;
}
.content:first-child{
    margin-top:100px;
}
.header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height: 100px;
}
.header .top {
    width:100%;
    float:left;
    background:#395D84;
    height:50px;
}
.header .bottom {
    width:100%;
    float:left;
    background:white;
    border-bottom:1px solid #d3d3d3;
    height:50px;
}
.footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height: 50px;
    background: rgba(57, 93, 132, 0.8);
}

JavaScript

var lastScrollTop = 0;
var toShow = false;
$(".content_wrapper").scroll(function (event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        if (!toShow) {
            $(".footer").stop().animate({
                bottom: "-70px"
            }, 500);
            toShow = true;
        }
    } else {
        if (toShow) {
            $(".footer").stop().animate({
                bottom: "0px"
            }, 500);
            toShow = false;
        }
    }
    lastScrollTop = st;
});