Change fixed position text color "on scroll" based on the background color-CodePudding

So, I have some navigation elements that are fixed position. I need to change their color based on the background color of the container below while scrolling. I'm not looking for a CSS solution/mix-blend-mode as the context is complex rather I need each element to detect the dark background container/div below on scroll and change its color based on that. More like applying and removing a class...

$(window).scroll(function(){
    var light_pos = $('div:nth-child(even)').offset().top;
    var light_height = $('div:nth-child(even)').height();

    var menu_pos = $('.link1').offset().top;
    var menu_height = $('.link1').height();
    var scroll = $(window).scrollTop();

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

span {position:fixed; padding: 50px; font-size:26px; color:#202020;}

.link1 {top:50px;  left:0;}
.link2 {top:0; right:0;}
.link3 {bottom:0; left:0;}
.link4 {bottom:50px; right:0;}

.bg {text-align:center; height:100vh;}
.bg:nth-child(even) {background-color:black; color:white;}

.menu_white {color: #000;}
.menu_black {color: #fff;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span >Top left</span>
<span >Top right</span>
<span >Bottom left</span>
<span >Bottom right</span>

<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>

CodePudding user response：

This would be a basic structure. Note that i applied a green border to show the boundaries of your span elements. Since they have 50px padding, you have to add that when calling offset(), because offset calculates the position including padding.

It's also much easier to use classes for your bg elements, else you have to compare color value, and that can be a pain because browsers handle color differently.

$(function() {
  // this applies bg color to your bg elements, instead of css.
  let bgs = $('div.bg');
  bgs.each(function(index, el) {
    let isEven = (index % 2 == 0);
    if (isEven) {
      $(el).addClass('black');
    } else {
      $(el).addClass('white');
    }
  })
});

$(window).on('scroll', function(e) {
    let texts = $('span.link');
    let bgs = $('div.bg');

    // nested because each span has different bounds.
    for (let span of texts) {
        let span_offset = $(span).offset().top 50;

        for (let bg of bgs) {
            let offset = $(bg).offset().top;
            if (offset >= span_offset &&
                offset <= span_offset   $(bg).outerHeight()) {
                let isBlack = $(bg).hasClass('black');
                let clr = isBlack ? 'black' : 'white';
                $(span).css('color', clr);
            }
        }
    }
});

span {position:fixed; padding: 50px; font-size:26px; color:#202020; border: 1px solid green;}

.link1 {top:50px;  left:0;}
.link2 {top:0; right:0;}
.link3 {bottom:0; left:0;}
.link4 {bottom:50px; right:0;}

.bg {text-align:center; height:100vh;}
.bg.black {background-color:black; color:white;}
.bg.white {background-color:white; color:black;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span >Top left</span>
<span >Top right</span>
<span >Bottom left</span>
<span >Bottom right</span>

<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>