JSFiddle - React, Tailwind, and code Playground

by ZeNz0r

HTML

<div class="content paddingMin">
    <div class="innerContent"></div>
    <div class="stickyFooter">
        <div class="showingBit"></div>
        <div class="hiddenBit"></div>
    </div>
</div>

CSS

.content {
    width:600px;
    margin:0 auto;
    background:#ccc;
}
.paddingMin {padding-bottom:50px;}
.innerContent {
    height:800px;
    background:rgba(255, 255, 255, 0.7);
}
.stickyFooter {
    width:600px;
    height:200px;
    position:fixed;
    bottom:-150px;
    background:blue;
}
.showStickyFooter {
    position:inherit;
    bottom:none;
}
.showingBit {
    width:600px;
    height:50px;
    background:rgba(255, 255, 0, 1);
}
.hiddenBit {
    width:600px;
    height:150px;
    background:orange;
}

JavaScript

//when i'm scrolling
$(window).scroll(function() {
    var windowScrollHeight = $(window).scrollTop() + $(window).height(),
        documentHeight = $(document).height(),
        footerHeight = $('.hiddenBit').height();
    console.log('scrollTop + windowH = windowScroll');
    console.log($(window).scrollTop()+' + '+$(window).height()+' = '+windowScrollHeight);
    console.log('document = '+documentHeight);
    console.log('hiddenBit = '+footerHeight);
    console.log('----------');
    if (windowScrollHeight == documentHeight) {
        $('.stickyFooter').addClass('showStickyFooter');
        $('.content').removeClass('paddingMin');
        /*$('html, body').animate({ 
           scrollTop: $(document).height()-$(window).height()
        }, 2000);*/
    } else if (documentHeight > windowScrollHeight) {
        $('.stickyFooter').removeClass('showStickyFooter');
        $('.content').addClass('paddingMin');
    }
    /*if ($('.stickyFooter').hasClass('showStickyFooter')) {
        //if scrolls up, remove classes
        $('html').on('DOMMouseScroll mousewheel', function (e) {
            if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { 
                //alternative options for wheelData: wheelDeltaX & wheelDeltaY
                //scroll down
                console.log('Down');
            } else {
                //scroll up
                console.log('Up');
                $('.stickyFooter').removeClass('showStickyFooter');
                $('.content').addClass('paddingMin');
                $('html, body').animate({ 
                   scrollTop: 0
                });
            }
            //prevent page fom scrolling
            return false;
        });//endon
    }//endif*/
});//endscroll