2

スクロール時に1つのdivが別のdivの上にあるときにアラートを出すにはどうすればよいですか？これが実際の例です 。http：//jsfiddle.net/uprosoft/Ek5Gy/267/

アラートを出すために、後を追うjQueryコードが見つかりません。

コード：

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? */
4

2 に答える 2

4

そのようなものが機能するはずです：

$(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
    }
});​

デモ：http： //jsfiddle.net/Ek5Gy/280/

于 2012-06-25T16:30:36.047 に答える
0

質問はJqueryに関するものですが、どちらにしても、vanillaJSでも同じことが言えます。

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);
于 2021-11-29T19:33:04.980 に答える