JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <div class="content"></div>
        <div class="content"></div>

</article>

<footer>
			<ul id="footerlinks">
				<li><a href="#">home</a></li>
				<li><a href="#">corporate governance</a></li>
				<li><a href="#">board &amp; management</a></li>
				<li><a href="#">asset &amp; permit details</a></li>
				<li><a href="#">corporate directory</a></li>
				<li><a href="#">contact</a></li>
			</ul>
</footer>
<div id="underfooter"></div>

CSS

article {
    min-height: 300px;
    background: black;
    padding: 10px;
    margin-bottom: 50px;
}

.content {
    height:300px;
    background: lightgrey;
    border: 1px dashed red;
}

footer {
	position: fixed;
    bottom:0px;
	height: 40px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	border-top:2px solid #6ce6d5;
	background: white;
	z-index: 100;
}

#underfooter {
	position: fixed;
	bottom: -44px;
	background: blue;
	width: 100%;
	height: 40px;
	z-index: 90;
}

JavaScript

$(function(){
    $('footer').hide();
    if($(document).height() < $(window).height()){
        $('footer').show();
    }
    $(window).resize(function(){
        console.log("resized");
       if($(document).height() > $(window).height()){
           console.log("hide footer now");
            $('footer').slideUp('slow');
        }
        else{
            $('footer').slideDown('slow');
        }
    });
});



$(window).scroll(function(){
//    console.log($(window).scrollTop(), $(window).height(), $(document).height());
    	
	if ($(window).scrollTop() + $(window).height() >= $(document).height() - 0)
    {
        
            $('footer').slideDown('slow');
            $('#white2').stop().animate({
                bottom:'6px'
            },400);
    }
    else
    {
            $('footer').slideUp('slow');
            $('#white2').stop().animate({
                bottom:'-44px'
            },400);
    }
});




$(document).ready(function() {
    if ($(window).height() >= $(document).height() )
    {
        $('footer').data('size','hide');
    }
    else
    {
        $('footer').data('size','show');
    }
});