Changing sticky nav color based on div below's color

Question

Basically on my site I have a sticky nav that has a transparent background. Below that I have light or dark colored content divs.

What I'm trying to achieve is as you scroll, a javascript function is actively determining if the sticky nav is on top of a light or dark content div, based on that div's classname (or a data attribute, whichever), and changing the color of the text in the sticky nav so it's visible over the content div.

Fiddle

Currently I don't have any javascript started as I don't know how to detect if one div is over another. But as you can see, once the sticky nav is over a dark content div I need to change the font color to a lighter color, and once it's back over a light content div I need to change the color to a darker color.

Example HTML:

<div id="sticky">Menu</div>
<div class="content light"></div>
<div class="content dark"></div>
<div class="content light"></div>
<div class="content dark"></div>
<div class="content light"></div>

Thanks in advance!

This may be of use: http://stackoverflow.com/questions/19661108/detect-element-if-over-another-element-via-using-css3-transform — Hywel Rees, Dec 04 '14 at 16:27

score 3 · Accepted Answer · answered Dec 04 '14 at 16:32

3

Fiddle working:

http://jsfiddle.net/bbazcyc8/1/

var stickyOffset = $("#sticky").offset();
var $contentDivs = $(".content");
$(document).scroll(function() {
    $contentDivs.each(function(k) {
        var _thisOffset = $(this).offset();
        var _actPosition = _thisOffset.top - $(window).scrollTop();
        if (_actPosition < stickyOffset.top && _actPosition + $(this).height() > 0) {
            $("#current").html("Current div under sticky is: " + $(this).attr("class"));
            $("#sticky").removeClass("light dark").addClass($(this).hasClass("light") ? "light" : "dark");
            return false;
        }
    });
});

<div>
    <div id="sticky">Menu <span id="current"></span></div>
    <div class="content light"></div>
    <div class="content dark"></div>
    <div class="content light"></div>
    <div class="content dark"></div>
    <div class="content light"></div>
</div>

answered Dec 04 '14 at 16:32

Cito

1,659
3
22
49

This works! One question though, it there a way to change the class only when the nav is exactly 1/2 covered so it changes right in the center of the text? Updated fiddle: http://jsfiddle.net/tenold/bbazcyc8/3/ – Corey Dec 04 '14 at 17:05
2

This is what I did to have the class change in the center of the sticky nav, if anyone's interested: http://jsfiddle.net/tenold/bbazcyc8/5/ – Corey Dec 04 '14 at 18:02
@Corey, can you perhaps show an example of a situation where there are more than two different background colors? So let's say black, white, green, blue backgrounds and the color of the navbar also has a different color for each specific background color? Le's say white, black, yellow, pink. Would be super helpful! – florisvl May 01 '20 at 19:56
Doesn't seem to work for `top:50%`, anyone got a solution for that? – kabooya Aug 07 '20 at 05:47

score 0 · Answer 2 · edited Oct 03 '20 at 01:45

kabooya, everyone. I found this for you: http://jsfiddle.net/Niffler/z34cG/

Try adding this

$(window).scroll(function() {

    /* get current scroll-position within window */
    var scroll = $(window).scrollTop();
    
    $('.mainLeft li').each(function() {

        /* get position of navigation-element (distance from top minus half of it's height, so that it changes color while it's half over black and half over white background) */
        var elementPositionTop = parseFloat($(this).offset().top) + (parseFloat($(this).height() / 2));

        /* change color for each background-change */
        if (elementPositionTop >= 320 && elementPositionTop <= 640 || elementPositionTop >= 960 && elementPositionTop <= 1280) {
            $(this).addClass('whiteText');
        } else {
            $(this).removeClass('whiteText');
        }
    });
});

Changing sticky nav color based on div below's color

2 Answers2

Linked