Erkennen, wenn ein div mit fester Position ein anderes Element kreuzt

Question

Ich habe Schwierigkeiten herauszufinden, wie man erkennt, wenn ein div mit fester Position anfängt und endet, um ein bestimmtes div beim Scrollen zu schweben.

Ich habe ein Div immer in Position fixiert und zentriert in meinem Fenster. Während ich meine Seite scrolle, möchte ich, dass das feste div, wenn es anfängt, einen anderen zu schweben, seine Farbe ändert und die Farbe löscht, sobald es aufhört zu schweben. Ich habe ein kleines Schema angehängt, um mein Problem zu veranschaulichen. Um fortzufahren:

Das feste div beim Laden der Seite hat eine schwarze Farbe -> Beginnt ein zweites div zu schweben, die Farbe wird weiß -> Fertig, um das zweite div zu schweben, ist die Farbe wieder schwarz.

fand ich dieses Problem: Detect when a position: fixed; element crosses over another element

Es funktioniert, wenn der div Beginn der zweiten zu überqueren, aber es nicht zurückgesetzt die Farbe, wenn der Hover beendet ist. Mein Code:

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

Vielen Dank im Voraus für Ihre Hilfe.

View image

Answer 1

Sie haben die div Höhen in Rechnung zu tragen.

Es gibt zwei "Momente" zu berechnen, die eingeben und verlassen.

Also, wenn die Unterseite des festen div tritt oben auf dem gescrollten ...
Und wenn die Unterseite der gescrollenen verlässt die Spitze der festen.

Hier ist ein Beispiel auszuführen: Sie sehr viel

$(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>