當它到達窗口頂部時，減慢div背景圖像滾動

Question

一旦div到達窗口頂部，我希望div的背景圖像比div內的內容滾動得慢一些。我無法親自在線找到一個例子，它具體說明了我正在談論的內容。

我假設這可以用jQuery來完成，但我並不擅長jQuery，所以我不確切知道它會帶來什麼。

Answer 1

我拼湊在一起完成我想要的任務的代碼。

這裏是我的html：

<div class="post" id="post-1"> 

     <div class="post-background" id="post-background-1"> </div> 

     <div class="post-content" id="post-content-1" ></div> 

    </div> 

    <div class="post" id="post-2"> 

     <div class="post-background" id="post-background-2"> </div> 

     <div class="post-content" id="post-content-2" ></div> 

    </div> 

    <div class="post" id="post-3"> 

     <div class="post-background" id="post-background-3"> </div> 

     <div class="post-content" id="post-content-3" ></div> 

    </div> 

</div> 

的CSS：

.post {position:relative;} 
.post-background {position:absolute; top:0; left:0; width:100%; height:100%} 
.post-content {position:absolute; top:0; left:0;} 

而jQuery的：

jQuery(window).scroll(function() { 
    var top = jQuery('.post').offset().top - jQuery(document).scrollTop();; 
    if (top < 0){ 
     var target = jQuery('.post').attr('id').match(/[\d]+$/); 
     jQuery('#post-background-' + target +'').css({ 
      'top' : (top/2.5)+"px", 'position' : 'fixed' 
     }); 
    } 
    if (top > 0){ 
     var target = jQuery('.post').attr('id').match(/[\d]+$/); 
     jQuery('#post-background-' + target +'').css({ 
      'top' : "0px", 'position' : 'absolute' 
     }); 
    } 
});