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 class="link1">Top left</span>
<span class="link2">Top right</span>
<span class="link3">Bottom left</span>
<span class="link4">Bottom right</span>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>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 class="link link1">Top left</span>
<span class="link link2">Top right</span>
<span class="link link3">Bottom left</span>
<span class="link link4">Bottom right</span>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>