Ändern der CSS eines Elements, wenn es einen anderen schwebt

Question

Ich habe eine feste Position Navbar mit weißen Links und ich versuche, die Links zu schwarz, wenn sie über einem anderen Element mit einem weißen Hintergrund "schweben".

Navbar Links CSS:

nav ul li a {color:#ffffff;} 

Navbar CSS:

nav {position:fixed;} 

Weiß div CSS:

div.white {background-color:#ffffff;} 

Stellen Sie sich das HTML ist:

<nav><ul><li><a>Link</a></li></ul></nav> 
<!-- Imagine there's a hero image here --> 
<div id="heroimage"></div> 
<div class="white"> 

Da die Navigationsleiste oben fixiert ist, wenn Sie die Website scrollen, wird die Navigationsleiste schließlich oben ("Hover") das weiße div und die Links werden "unsichtbar". Ich versuche einen Weg zu finden, sie schwarz werden zu lassen, nur wenn sie oben auf dem weißen div sind.

Ist dies mit JQuery möglich? Nach welchen Funktionen suche ich? Ich konnte nirgendwo anders eine Antwort finden ...

Answer 1

Okay, sehen Sie, ob das mehr ist, wonach Sie gefragt haben. Sie müssen scrollen, um den Farbwechsel "NAVBAR" zu sehen. Hoffe das hilft. Lass es mich wissen, wenn du irgendwelche Fragen hast.

Edit:

Also jetzt, dass ich verstehe, was du meinst.

Hier ist eine andere Geige. https://jsfiddle.net/u96xa39L/2/

HTML:

<div id="colorMeDifferent" class="blackbarwhitelinks">NAVBAR</div> 

<div class="hugeDiv">No color change on overlap</div> 

<div id="hoveroverme" class="hoverBar">When we over lap here, colors change</div> 

<div class="hugeDiv">No color change on overlap</div> 

JQuery/Javascript

$(window).scroll(function() { 
    var hoverElement = $("#hoveroverme"); 
    var elementsToChange = $("#colorMeDifferent"); 


    if (Math.abs(hoverElement.offset().top - elementsToChange.offset().top) <= hoverElement.height()) { 
    elementsToChange[0].className = "whiteBarBlackLinks";  
    } else { 
    elementsToChange[0].className = "blackbarwhitelinks"; 
    } 
}); 

CSS

#colorMeDifferent { 
    position: fixed; 
} 

.blackbarwhitelinks { 
    background-color: black; 
    color: white; 
} 

.whiteBarBlackLinks { 
    background-color: white; 
    color:black; 
} 

.hugeDiv { 
    min-height: 650px; 
    background-color:red; 
} 

Answer 2

Almonds Antwort war eine große Hilfe als Basis. Dies war das Endergebnis:

HTML

<nav><ul><li><a id="link">Link</a></li></ul></nav> 
<!-- Some more HTML --> 
<div id="content"></div> 

CSS

#content {background-color:#fff;} 
.navwhite {color:#fff;} 
.navblack {color:#000;} 

JQuery

$(document).ready(function() { 
    $('nav>ul>li>a').addClass("navwhite"); 
}); 

$(window).scroll(function() { 
    var offsetDiv = $('div#content').offset().top; 
    var offsetNav = $('#link').offset().top; 

    if (offsetDiv <= offsetNav){ 
     $('nav>ul>li>a').removeClass("navwhite").addClass("navblack"); 
    } 
    else { 
     $('nav>ul>li>a').removeClass("navblack").addClass("navwhite"); 
    } 
});