JSFiddle - React, Tailwind, and code Playground

by Michael Keller

HTML

<div class="test" id="topDiv"></div>
<div class="test" id="midDiv"></div>
<div class="test" id="botDiv"></div>

<div id="label">
    passed waypoint 500px
</div>

CSS

.test{
    width:100px;
    height:1000px;
   }

#topDiv{
    background-color:#ababab;
}

#midDiv{
    background-color:red;
}

#botDiv{
    background-color:dimgrey;
}



div#label{
    display:none;
    background-color:blue;
    width:200px;
    height:50px;
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-100px;
    color:white;
}

JavaScript

$(function(){
    alert("runs");
    $(window).scroll(function(e)
    {
        if($(this).scroll()>$("#topDiv").height)
        {
        
            alert("works");
        }
        else
        {
            alert("don't work");
        }
    });
        
})