固定位置のdivが別の要素と交差するときの検出

Question

スクロール中に特定のdivをホバリングするように開始位置と終了位置が固定されているdivを検出する方法を見つけるのには苦労しています。

私はdivを常に固定し、自分のウィンドウの中央に配置しました。私は自分のページをスクロールしている間、固定されたdivが他のものをホバリングし始めたら、その色を変更し、ホバリングが終了したら色を取り除きたいと思います。私は自分の問題を説明するために小さなスキーマを付けました。

ページが読み込まれるときの固定divは、黒色になります。> 2番目のdivに移動し始めます。色は白に戻ります。> 2番目のdivに移動するにはFinishをクリックします。

私はこの問題を発見した：Detect when a position: fixed; element crosses over another element

div要素が第二1を横切るように起動したときにそれは動作しますが、それはホバーが終了する色をリセットしません。私のコード：

$(window).scroll(function() { 
    if ($('div.fixed').offset().top < ($(".div-to-cross").offset().top - 0)) { 
    $('div.fixed').removeClass('white'); 
    } else { 
    $('div.fixed').addClass('white'); 
    } 
}); 

ご協力いただきありがとうございます。あなたはアカウントでdivの高さを取らなければならない

View image

Answer 1

。

入場と退会の2つの「瞬間」があります。

固定されたdivの下端がスクロールしたものの上端に入ると、...
そして、スクロールしたものの下端が固定された上部を離れるとき。ここで

は実行する例です。

$(window).scroll(function(){ 
 
    var fixed = $("div.fixed"); 
 
    
 
    var fixed_position = $("div.fixed").offset().top; 
 
    var fixed_height = $("div.fixed").height(); 
 

 
    var toCross_position = $(".div-to-cross").offset().top; 
 
    var toCross_height = $(".div-to-cross").height(); 
 

 
    if (fixed_position + fixed_height < toCross_position) { 
 
    fixed.removeClass('white'); 
 
    } else if (fixed_position > toCross_position + toCross_height) { 
 
    fixed.removeClass('white'); 
 
    } else { 
 
    fixed.addClass('white'); 
 
    } 
 

 
});

.fixed{ 
 
    position:fixed; 
 
    top:calc(50% - 50px); 
 
    left:0; 
 
    background-color:black; 
 
    height:100px; 
 
    width:100%; 
 
} 
 
.white{ 
 
    background-color:white; 
 
} 
 
.div-to-cross{ 
 
    height:100px; 
 
    background-color:blue; 
 
} 
 

 
/* just for this demo */ 
 
.spacer{ 
 
    height:400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="fixed"></div> 
 
<div class="spacer"></div> 
 
<div class="div-to-cross"></div> 
 
<div class="spacer"></div>