JSFiddle - React, Tailwind, and code Playground

by Suresh Pattu

HTML

<div id = "content_wrapper">
<div id = "content">This is some content</div>
    <div id = "popContent">This is some content</div>
<div id = "footer">This is the footer</div>
</div>

CSS

#content {
    background-color:#f00;
    width:100%;
    height:500px;
}
#popContent{display:none;width:100px;height:100px;}

#footer {
    background-color:#000;
    color:#fff;
    width:100%;
    height:200px;
}

JavaScript

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

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

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
      && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
}


    $("#content_wrapper").scroll(function() {
       console.log("Scrolling 1");
    });
    
    $("#content_wrapper").on("scroll", function(){
       console.log("Scrolling 2"); 
    });
    $(function(){
        var a;var c=false;
        var b=$("#popContent");
        var e=$(window);
        var d=$('#footer').position().top;
        e.scroll(function(){
            window.clearTimeout(a);
            a=window.setTimeout(function(){
            if(e.scrollTop()<=d){
              if(c==false)   { 
                  c=true;b.stop(true,true).show(); 
              }else{
              c=false;
                  b.fadeOut(500)
            }}},100)})
});