改变背景颜色

HTML

<div class="checker"> 
</div> 
<div class="red boxes"> 
</div> 
<div class="green boxes"> 
</div> 
<div class="blue boxes"> 
</div>

CSS

.checker { 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    position: fixed; 
    top: 0; 

} 
.boxes { 
    margin-top: 300px; 
    width: 600px; 
    height: 600px; 
} 
.red { 
    background: red; 
} 
.green { 
    background: green; 
} 
.blue { 
    background: blue; 
}

如何改变将类“.checker”的背景颜色改为“.boxes”背景颜色，当它们触摸底部边框时呃与滚动，使用jquery

例如：当.class红色到达class =“。red .checker”的底部边界时，类“.checker”的背景颜色应该更改为红。等我不明白如何做到这一点。请帮帮我。

jsfiddle

来源

2013-06-24 The Last Coder

三upvotes并没有任何JavScript一个已经试过吗？ – j08691

这jsFiddle显示如何检测重叠，你可以使用这个和扩大改变类。 http://jsfiddle.net/98sAG/

var overlaps = (function() { 
    function getPositions(elem) { 
     var pos, width, height; 
     pos = $(elem).position(); 
     width = $(elem).width(); 
     height = $(elem).height(); 
     return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ]; 
    } 

    function comparePositions(p1, p2) { 
     var r1, r2; 
     r1 = p1[0] < p2[0] ? p1 : p2; 
     r2 = p1[0] < p2[0] ? p2 : p1; 
     return r1[1] > r2[0] || r1[0] === r2[0]; 
    } 

    return function (a, b) { 
     var pos1 = getPositions(a), 
      pos2 = getPositions(b); 
     return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]); 
    }; 
})();

信用： jQuery Collision

来源

2013-06-24 17:37:35

谢谢soo ..我是js的新手......这对我有很大的帮助。 –