Increase div opacity on scroll down

Question

I have researched lost of sources, but there are no solution for my problem. I created a div and its visibility is hidden in CSS sources. I want to get to start it from 0.1 of opacity when scroll on 200 and when scroll located on 300 opacity becomes 1.

$(document).ready(function(){                    
    $(window).scroll(function(){
        if ($(this).scrollTop() > 150) {
            $('.fscrollonh').css({"opacity": "0.1",  "visibility": "visible"});
            $('.fscrollonh').show(500);
        } else {
            $('.fscrollonh').hide(500);
        }
    });
});

Answer 1

I assume you're looking for something like this?

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

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;
}

<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>