我有以下代码
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”的背景色,当它们触碰到带滚动的“.checker”的下边框时,使用jquery
例如:当.class red到达class=“.red.checker”的下边框时,.checker”的背景色应该变为红色。等等。我不知道怎么做。请帮帮我。
jsfiddle
最佳答案
这个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