changing background-color of a div responding to the position of the other divs

Question

I have following code

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

How do i change the background color of class ".checker" to the background color of ".boxes" when them touches the bottom border of ".checker" with scrolling, using jquery

eg: when the .class red reach to the bottom border of the class=".red .checker" the background color of the class ".checker" should change to red. etc. I dont understand how to do this. please help me.

jsfiddle

Three upvotes and there isn't any JavScript that's been tried? — j08691, Jun 24 '13 at 17:31

score 1 · Answer 1 · answered Jun 24 '13 at 17:32

1

Are you asking something like this http:// jsfiddle.net/98sAG, You can use the jQ collision API if you want to try to trig it while Collision happens

answered Jun 24 '13 at 17:32

JETR NSEF

354
1
3
13

score 1 · Accepted Answer · edited May 23 '17 at 12:05

This jsFiddle shows how to detect overlaps, you can use this and expand to change the class. 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] );
    };
})();

Credit: jQuery Collision

Thank you soo much.. I am a a newbie to js...This helps me a lot. — It worked yesterday., Jun 24 '13 at 17:48

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

Maybe this code will help: Efficiently Detect When Sibling Elements Overlap.

You could probably simplify the code to only check for vertical positions.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 24 '13 at 17:35

Brent Washburne

12,904
4
60
82

changing background-color of a div responding to the position of the other divs

3 Answers3