JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
test
</div>

CSS

body {height:2000px;}
#test {position:fixed; top:0; left:0; display:none}

JavaScript

var $window = $(window);
$window.scroll(function () {
  var scrollTop = $(this).scrollTop();

  // only fadeIn between 200 from top and 200 from bottom
  if (scrollTop  > 200 && scrollTop < $(document).height() - $window.height() - 200) {
    $('#test').fadeIn(500);
  } else {
    $('#test').fadeOut(500);
  }
});