在屏幕上淡出div的頂部和底部部分

Question

我想要一些幫助淡出滾動屏幕上的頂部和底部部分。在閱讀Fade only top part of div out as it reaches fixed navigation和Yoann的回答後，我得到了最重要的部分褪色工作，但我無法弄清楚如何與底部一樣做。

$(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) }); 
     }); 

    }); 
}); 

Answer 1

創建一個從白色（或任何背景顏色）到透明然後回到白色的css漸變。將你的容器封裝在div中，並在必要時使用jquery添加和刪除div中的css類。