title: Fade top and bottom part of div on scroll
body: <p>I would like some help to fade out the top and the bottom part of an div on scroll. I got the top part fade working after reading <a href="https://stackoverflow.com/questions/21978184/fade-only-top-part-of-div-out-as-it-reaches-fixed-navigation">Fade only top part of div out as it reaches fixed navigation</a> and Yoann's answer but I can't figure out how to do it with the bottom part aswell.</p>
  
  <pre><code>$(window).on('scroll', function () {
      $('.section').each(function (index, item) {
          $(item).children().each(function (indexChild, child) {
              var st = $(window).scrollTop();
              st = $(window).scrollTop() - $(child).offset().top + 10;
              $(child).css({ 'opacity': (1 - st / 20) });
          });
  
      });
  });
  </code></pre>