JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>
<div id="log2"></div>

<div id="element">SEU ELEMENTO
  </div>
<div id="scroll">Scroll Down</div>
    <div  display="none" class="teste" id="teste"> <b>DIV APARECEU
        </b></div>
        
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS

#element {
  margin: 140px;
  text-align: center;
  padding: 5px;
  width: 200px;
  height: 200px;
  border: 1px solid #0099f9;
  border-radius: 3px;
  background: black;
  color: #ffffff;
  opacity: 0.6;
}
#log {
  position: fixed;
  top: 40px;
  left: 40px;
  color: #333;  
}

#log2 {
  position: fixed;
  top: 80px;
  left: 40px;
  color: #333;
}
#scroll {
  text-align: center;
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px;
}

.teste{
      text-align: center;
    height:500px;
    width: 500px;
    background-color:red;    
}
}

JavaScript

function log(elem) {
  $("#log").html("pos do elemento : <b>" + elem + "</b> px");  
}

function log2(scr){
   $('#log2').html("pos do scroll top : <b>" + scr + "</b> px");
}

$(function() {
    
    //posicao fim do elemento
  var posElem = $('#element').offset().top + $('#element').height() ; 
    
    //posicao topo do scroll
    var scr = $(window).scrollTop();
    $('#teste').hide();
    
    
  log(posElem); //posição
  log2(scr);
    
    
    //evento chamado quando ocorre o scroll
  $(window).scroll(function() { 
      scr = $(window).scrollTop();      
      log(posElem);
      log2(scr);
      
      if(parseInt(posElem) < parseInt(scr)){
          $('#teste').show();
      }
      if(parseInt(posElem) > parseInt(scr)){
          $('#teste').hide();
      }
  });
});