Fade out div on scroll

Question

Я теряю изображение героя div #, когда моя страница прокручивается. На данный момент приведенный ниже код использует номинальное значение 1000, чтобы обеспечить медленное затухание, но мой div # hero-image на 100% превышает высоту браузера, поэтому мне бы хотелось, чтобы полный переход непрозрачности от 1 до 0 произошел когда пользователь прокручивает 100% высоту div из начального видового экрана.

Любая помощь очень ценится!

/* Fade #hero-image on scroll */ 
$(document).ready(function(){ 
    $(window).scroll(function(){ 
     $("#hero-image").css("opacity", 1 - $(window).scrollTop()/1000); 
    }); 
}); 

Answer 1

Используйте высоту элемента вместо общего значения 1000.

Fiddle: http://jsfiddle.net/e84enbf2/

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     $("#hero-image").css("opacity", 1 - $(window).scrollTop()/$('#hero-image').height()); 
    }); 
}); 

Если я правильно понял ваш комментарий правильно сделать замирание из полной после прокрутки половину высоты DIV просто разделить на 2.

Fiddle: http://jsfiddle.net/e84enbf2/1/

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     $("#hero-image").css("opacity", 1 - $(window).scrollTop()/($('#hero-image').height()/2)); 
    }); 
});