I changed a bit your 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) });
});
});
});
Edit the divisor (20) or remove the +10 to reduce/increase the effect.
Edit: Comment changed the approach to hiding elements (progressive hiding on big element), try then with a gradient acting as a mask and growing down with the scroll :
<div class="section red">
<div class="mask red"> </div>
<h1>section headline</h1>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
</div>
.mask.red{
position:absolute;
width:100%;
height:1px;
background: -webkit-linear-gradient(red, rgba(255,0,0,0)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, rgba(255,0,0,0)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, rgba(255,0,0,0)); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, rgba(255,0,0,0)); /* Standard syntax */
}
$(window).on('scroll', function () {
$('.section .mask').each(function (index, item) {
var heightMask = $(window).scrollTop() - $(item).offset().top+90;
console.log(heightMask);
$(item).css({height:heightMask});
});
});