JSFiddle - React, Tailwind, and code Playground

by karan3112

HTML

<div class="container">
<div class="social_links">Social Links</div>
<div class="bottom_links">Bottom Links</div>
</div>

CSS

.bottom_links{ position:fixed; bottom:0px; width:100%; padding:10px; background:#ddd; text-align:center; display:none;}
.container{ min-height:1000px; width:500px; position:relative;}
.social_links{ background:#f1f1f1;padding:5px;  margin-top:500px;}

JavaScript

$(function(){
    triggerFunction();
    $(window).scroll(function(){
        triggerFunction();
    });
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
function triggerFunction()
{
    if(isScrolledIntoView('.social_links'))
    {
        $('.bottom_links').fadeOut(); 
    }else{
        $('.bottom_links').show(); 
    }
}