背景を変えるimg、スクロール（各セクションごとに異なる画像）

Question

特定のセクションでスクロールしながらbackground-imgを変更する方法はありますか？ フィドル（jsfiddle.net/vwxxjhg1/）に見られるように、私は左側に小さなアイコンがあります。だからアイコンが動いている（またはページが移動していて、アイコンが固定位置にあるなど）、灰色の部分に達すると、それはアイコンの背景画像を変更するのだろうか？次の白い部分は3.背景画像...などです。

ありがとうございます！

Answer 1

I think its helps to you . 
jQuery(window).scroll(function(){ 
var fromTopPx = 200; // distance to trigger 
var scrolledFromtop = jQuery(window).scrollTop(); 
if(scrolledFromtop > fromTopPx){ 
    jQuery('html').addClass('scrolled'); 
}else{ 
    jQuery('html').removeClass('scrolled'); 
} 
}); 
And in your CSS file: 

html { 
background-repeat: no-repeat; 
background-position: center center; 
background-attachment: fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

html { 
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg); 
    } 

html.scrolled { 
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg); 
    }