How to change the color of an element based on the section present below it.
function handleDarkSectionColors() {
var section = $('.header-color-invert');
var sectionClass;
if (section.length) {
var headerAlt = $('.header-bottom-bar');
var self_window;
$(window).on('scroll', function(){
self_window = $(this);
activeSection(self_window);
});
function activeSection(self_window) {
var st = self_window.scrollTop() + (self_window.height() / 2) - 100;
section.each(function(){
var sectionOffset = $(this).offset().top ;
var currentSection = $(this);
if (currentSection.hasClass('header-color-invert')) {
sectionClass = 'light-typo';
}
if (sectionOffset + currentSection.height() > st && st > sectionOffset) {
headerAlt.addClass(sectionClass);
return false;
} else {
headerAlt.removeClass(sectionClass);
}
});
}
}
}
handleDarkSectionColors();
var section = $('.header-color-invert');
var sectionClass;
if (section.length) {
var headerAlt = $('.header-bottom-bar');
var self_window;
$(window).on('scroll', function(){
self_window = $(this);
activeSection(self_window);
});
function activeSection(self_window) {
var st = self_window.scrollTop() + (self_window.height() / 2) - 100;
section.each(function(){
var sectionOffset = $(this).offset().top ;
var currentSection = $(this);
if (currentSection.hasClass('header-color-invert')) {
sectionClass = 'light-typo';
}
if (sectionOffset + currentSection.height() > st && st > sectionOffset) {
headerAlt.addClass(sectionClass);
return false;
} else {
headerAlt.removeClass(sectionClass);
}
});
}
}
}
handleDarkSectionColors();