I have a fixed position navbar with white links and I'm trying to make the links turn to black when they're above ("hovering") another element with a white background.
Navbar links CSS:
nav ul li a {color:#ffffff;}
Navbar CSS:
nav {position:fixed;}
White div CSS:
div.white {background-color:#ffffff;}
Imagine this is the HTML:
<nav><ul><li><a>Link</a></li></ul></nav>
<!-- Imagine there's a hero image here -->
<div id="heroimage"></div>
<div class="white">
Since the navbar is fixed to the top, when you scroll the website, the navbar will eventually get on top ("hover") the white div and the links will become "invisible". I'm trying to find a way to make them turn to black only when they are on top of the white div.
Is this possible with JQuery? What functions am I looking for? I couldn't find an answer elsewhere...
Okay, see if that is more what you were asking for. You will have to scroll to see the "NAVBAR" color change. Hope this helps. Let me know if you have any questions.
Edit:
So now that I understand what you meant.
Here's another Fiddle. 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;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments