I'm trying to build a header that changes colour when a div has a certain id is behind it.
For example, I have a group of blocks
<section id="light"></section>
<section id="dark"></section>
<section id="light"></section>
<section id="dark"></section>
When the dark section is behind the header I'd like to add a class to the body (eg dark) so I can invert the colours. I'd like a little more control over the colours, so using mix-blend isn't going to quite cut it.
I've got the below script, which works for the hero of the site (this is always dark)
$(window).scroll(function() {
$("#dark").each(function(index, value){
var top_of_element = $(this).offset().top;
var bottom_of_element = $(this).offset().top + $(this).outerHeight();
var bottom_of_screen = $(window).scrollTop() + ($(window).height() / 2);
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$('body').addClass('dark-nav');
} else {
$('body').removeClass('dark-nav');
}
});
});
But it isn't picking up the dark sections below.
Can anyone help?
Cheers
