JSFiddle - React, Tailwind, and code Playground

by Pat Dobson

HTML

<div id="content">

<h1 id="move"> end content </h1>

</div>

<div id="footer">

this is the footer
    
</div>

CSS

html, body{

    }
    #footer {
        position: fixed;
	    z-index: 999;
	    bottom: -300px;
	    width: 100%;
	    height: 400px;
	    background-color: #999;
        opacity:0.5;

    }
    #content {
        padding-bottom: 100px;

    }

    #move {
        height:auto;
        top: 5000px;
        position: relative;
        background-color:red;
    }

JavaScript

$(window).scroll(function () {

        if ($(window).scrollTop() > $('#move').position() -500) {
            $('#footer').css('bottom', 0);
        }
        else {
            $('#footer').css('bottom', -300);
        }
        
        if( $(window).scrollTop() + $(window).height() == $(document).height() ) {
            $('#footer').css('bottom', 0);
        }
    });

    $(document).ready(function () {

        $('#footer').bind('mouseenter', function () {

            $(this).stop().animate({ bottom: 0 }, 400); // on hover  0 400  

        }).bind('mouseleave', function () {

            $(this).stop().animate({ bottom: -300 }, 400); // on out -300  400

        });        
        
    });