JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<div id="div"></div>
<div id="pos">0</div>

CSS

#div
{
        width:100%;
    height:100px;
    background-color:blue;
    position:fixed;
    display:none;
}
#pos
{
   position:fixed;
}
body{
    
    height:1000px;
}

JavaScript

$(document).scroll(function() {

      var y = $(this).scrollTop();    
      var hoffset = 100;

      if (y > hoffset) {
          $("#div").show();
          $("#pos").css({color:"white"});
      } else {
          $("#div").hide();
          $("#pos").css({color:"black"});
      }
    $("#pos").html(y);
  });