更改背景图像，滚动（每个部分不同的图像）

【问题标题】：change background img, with scroll (diffrent img per each section)更改背景图像，滚动（每个部分不同的图像）
【发布时间】：2016-09-06 08:49:39
【问题描述】：

有没有办法在滚动特定部分时更改背景图像。正如您在小提琴 (jsfiddle.net/vwxxjhg1/) 中看到的那样，我在左侧有一个小图标。因此，当图标移动（或页面移动，图标为固定位置，例如我有）并到达灰色部分时，它应该改变图标的背景图像。 3. background-img ...等下一个白色部分。

感谢您的一些想法！

【问题讨论】：

标签： javascript jquery html css image

【解决方案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);
    }

【讨论】：