Question

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

感谢您的一些想法！

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);
    }

使用滚动更改背景img（每个部分使用不同的img）

1 个答案: