Change link color based on background/class?

Issue

This is the jQuery code I'm trying to work with, found in this answer:

$(document).ready(function(){
    $(window).scroll(function(){
    var light_pos = $('.white_div').offset().top;
    var light_height = $('.white_div').height();
    var menu_pos = $('.menu-item').offset().top;
    var scroll = $(window).scrollTop();

    if(menu_pos > light_pos && menu_pos < (light_pos + light_height)) {
        $('.menu-item').addClass('menu_black');
      $('.menu-item').removeClass('menu_white');
    }
    else {
        $('.menu-item').removeClass('menu_black');
      $('.menu-item').addClass('menu_white');
    }

  })
})

The navigation is fixed, so it follows you when you scroll down. But the issue I'm having is that it needs to change colors based on the background below it. As in, some sections are white, others are dark and I need the navigation link to reflect that. However, the code doesn't seem to be working for my structure. After it loads and lands on the dark background, the text is white, as it should be. And it switches to dark on the next white div. But after that, it just changes back to white and doesn't follow the classes of divs at all.

What can I do to fix this? Thank you!

Adding a snippet:

$(document).ready(function(){
    $(window).scroll(function(){
    var light_pos = $('.white_div').offset().top;
    var light_height = $('.white_div').height();
    var menu_pos = $('.menu-item').offset().top;
    var scroll = $(window).scrollTop();

    if(menu_pos > light_pos && menu_pos < (light_pos + light_height)) {
        $('.menu-item').addClass('menu_black');
      $('.menu-item').removeClass('menu_white');
    }
    else {
        $('.menu-item').removeClass('menu_black');
      $('.menu-item').addClass('menu_white');
    }

  })
})

.menu-item {
position: fixed;
}

.menu_white {
    color: #fff;
}

.menu_black {
    color: #000;
}

.dark_div {
background: #000;
/* added height & styling just for preview */
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}

.white_div {
background: #fff;
/* added height & styling just for preview */
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="menu-item menu_white" href="#">Link</a>

<div class="dark_div">Dark Background</div>
<div class="white_div">White background</div>
<div class="white_div">White background</div>
<div class="white_div">White background</div>
<div class="dark_div">Dark Background</div>

<div style="height: 500px"></div>

Solution

I think I found a solution to your problem. First of all by getting this $('.white_div').height(); it doesn't really serve you because it is just one unique height of your div.

Therefore, what you really need is the sum of heights of your three divs with the white background. In order to achieve that, I saved the length of all your white_divs to a variable named light_height_divs which is the quantity of white divs inside your DOM.

I also changed your if condition inside your jquery code by replacing this if(menu_pos > light_pos && menu_pos < (light_pos + light_height)) { => if(menu_pos > light_pos && menu_pos < (light_pos + light_height_divs*light_height)) { multiply the quantity of white divs with the height of one given div.

$(document).ready(function(){
    $(window).scroll(function(){
    var light_pos = $('.white_div').offset().top;

    var light_height_divs = $('.white_div').length;
    var light_height = $('.white_div').height();
    var menu_pos = $('.menu-item').offset().top;
    var scroll = $(window).scrollTop();

    if(menu_pos > light_pos && menu_pos < (light_pos + light_height_divs*light_height)) { //

        $('.menu-item').addClass('menu_black');
      $('.menu-item').removeClass('menu_white');
    }
    else {
        console.log("doesn't enter");
        $('.menu-item').removeClass('menu_black');
      $('.menu-item').addClass('menu_white');
    }

  })
})

.menu-item {
position: fixed;
}

.menu_white {
    color: #fff;
}

.menu_black {
    color: #000;
}

.dark_div {
background: #000;
/* added height & styling just for preview */
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}

.white_div {
background: #fff;
/* added height & styling just for preview */
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="menu-item menu_white" href="#">Link</a>

<div class="dark_div">Dark Background</div>
<div class="white_div">White background</div>
<div class="white_div">White background</div>
<div class="white_div">White background</div>
<div class="dark_div">Dark Background</div>

<div style="height: 1000px"></div>

I hope that helps you.

Answered By - Oris Sin