Плавное изменение opacity при прокрутке

$(window).scroll(function() { 
var elem = $(".section"); 
  var sTop = $(this).scrollTop(); 
 
  $(elem).each(function(i, el) {  
    var pTop = $(elem).offset().top; 
    var height = $(elem).height();  
 
    var top = pTop - sTop + height;  
    if (top > 0) {  
      $(elem).css({ 
        opacity: function() { 
          var elementHeight = $(elem).height(); 
          return 1 - top / 100 + height / 100; 
        } 
      }); 
    } 
 
  }); 
});

body{height:1000px;} 
.section{height:200px;width:100%;background-color:black;opacity:0.1;margin:100px 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="section"></div> 
<div class="section"></div> 
<div class="section"></div> 
<div class="section"></div>