スクロール中に段階​​的に不透明度を追加する

Question

既存のコードを変更する方法を考え出すのに苦労しています。サイトで見た機能を複製する必要があります。このサイトに行くと、下にスクロールすると画像が不透明になります。私のフィドルはこれを幾分行っていますが、より暗い不透明度を適用し、一度にすべてではなく不透明度を徐々に追加する方法を理解できません。

私は、不透明度のレベルがjavascriptによって変更されていることを知っています。私はそれを変更して後の結果を得る方法を認識していません。

var scrollPosition = $(this).scrollTop(); 
      var docHeight = $(document).height(); 
      var diff = docHeight - scrollPosition; 
     console.log(scrollPosition); 
     $('#demolition1').css({'opacity':diff/docHeight}); 

Fiddle

<div id="home-main-img"> 
<img src="http:optimumwebdesigns.com/images/demolition1.jpg" alt="Demolition and Wrecking" id="demolition1"> 
</div> 

<div class="height"> 
</div> 

#home-main-img img{ 
    width: 100%; 
    height: auto; 
    margin: 0; 
    display: block; 
} 

#home-main-img { 
    background: #000; 
} 

.height { 
    height:500px; 
} 

$(document).scroll(function(e){ 
     var scrollPosition = $(this).scrollTop(); 
     var docHeight = $(document).height(); 
     var diff = docHeight - scrollPosition; 
    console.log(scrollPosition); 
    $('#demolition1').css({'opacity':diff/docHeight}); 
}); 

Answer 1

の正しい割合を取得するには、代わりに文書で、画像の高さを使用することができますむしろdocの高さに対するdiffフェードアウトしたいアイテムの高さよりも大きくなります。ここで

var $item = $('#demolition1'); 

$(document).scroll(function(e) { 

     var $this = $(this), 
     scrollPosition = $this.scrollTop(), 
     itemHeight = $item.height(), 
     diff = itemHeight - scrollPosition; 

    console.log(scrollPosition); 
    $item.css({'opacity': (diff/itemHeight) }); 

}); 

の作業JSフィドル：

あなたのJSは、何かのようにする必要がありますhttps://jsfiddle.net/s6ta6bdc/

Answer 2

あなたは、私はあなたの間違いが設定されると思う不透明

$(document).scroll(function(e){ 
     var scrollPosition = $(this).scrollTop(); 
     var imgHeight = $('#demolition1').height(); 

     var diff = imgHeight - scrollPosition; 
    $('#demolition1').css({'opacity':diff/imgHeight}); 
}); 

try fiddle updated