JSFiddle - React, Tailwind, and code Playground

by Amp3rsand

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: 500px;
    background: black;
    padding: 10px;
    margin-bottom: 50px;
}

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

footer {
	position: fixed;
	bottom: -50px;
	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').data('size','hide');
});




$(window).scroll(function(){
    	
	if ($(window).scrollTop() + $(window).height() >= $(document).height() - 0)
    {
        if($('footer').data('size') == 'hide')
        {
            $('footer').data('size','show');
            $('footer').stop().animate({
                bottom:'0px'
            },400);
            $('#white2').stop().animate({
                bottom:'6px'
            },400);
        }
    }
    else
    {
        if($('footer').data('size') == 'show')
        {
            $('footer').data('size','hide');
            $('footer').stop().animate({
                bottom:'-50px'
            },400);
            $('#white2').stop().animate({
                bottom:'-44px'
            },400);
        }  
    }
});




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