JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollonh">I fade on scroll</div>
<div class="200pxmark">200px mark</div>
<div class="300pxmark">300px mark</div>

CSS

body {
  min-height: 200vh;
}
.scrollonh {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.\32 00pxmark, 
.\33 00pxmark {
  margin-top: 200px;
  height: 0;
  overflow: visible;
  border-top: 1px solid red;
}
.\33 00pxmark {
  margin-top: 100px;
}

JavaScript

$(document).ready(function(){                    
    $(window).scroll(function(){
      let sT =  $(window).scrollTop();
      $('.scrollonh').css({
        opacity: (sT < 201 ? 0 : (sT > 300 ? 1 : (sT - 200)/100))
      })
    });
});