JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mybigdiv">
    <h1>scroll the window --> thataway</h1>
</div>
<div id="label">
    passed waypoint 500px
</div>

CSS

div#mybigdiv{
    background-color:red;
    border:5px dotted green;
    width:3000px;
    height:400px;
    position:absolute;
    top:30px;
    left:30px;
}
div#label{
    display:none;
    background-color:blue;
    width:200px;
    height:50px;
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-100px;
    color:white;
}

JavaScript

$(function(){
    $(window).scroll(function(e)
    {
        if($(this).scrollLeft()>500)
        {
        
            $("#label").show();
        }
        else
        {
            $("#label").hide();
        }
    });
        
})