当一个 div 在滚动时接触另一个 div 时返回的 jQuery 函数

Question

how can I give an alert when one div hovers over another div upon scroll? here is a working example, http://jsfiddle.net/uprosoft/Ek5Gy/267/

I cant find a jQuery code to go after though in-order to give an alert.

Code:

HTML

<div id="container">
<div id="div1">test</div>
<br>
<div id="div2"> another test</div>
</div>

CSS

#div1{
background: green;
position: fixed;
        width: 100%;
}
#div2{
background: yellow;
position: relative;
width: 100%;
margin-top: 100px;
}
#container{

height: 1000px;

}

JQUERY ???

/* what jquery code goes here? to alert when the yellow div touches the green div upon scroll? */

Answer 1

Something like that should work:

$(window).scroll(function() {
    var div1 = $("#div1");
    var div2 = $("#div2");
    var div1_top = div1.offset().top;
    var div2_top = div2.offset().top;
    var div1_bottom = div1_top + div1.height();
    var div2_bottom = div2_top + div2.height();

    if (div1_bottom >= div2_top && div1_top < div2_bottom) {
        // overlapped
    }
});​

DEMO: http://jsfiddle.net/Ek5Gy/280/

Answer 2

I know the question is for Jquery but either way, the same done with vanilla JS

function didDiv1TouchedDiv2() {
    var div1 = document.getElementById("div1"); 
    var div2 = document.getElementById("div2"); 
    // Guard
    if (div1 === undefined || div2 === undefined) return;
    var div1Rect = div1.getBoundingClientRect();
    var div2Rect = div2.getBoundingClientRect();
    // We need to add the offsetHeight in order to include padding and border of element and get excact position
    return div1Rect.top >= div2Rect.top + div2.offsetHeight;  
}
window.addEventListener("scroll", didDiv1TouchedDiv2);