Bueno, encontré un script que adapte para mis necesidades, lo paso por si a alguno le sirve.
La idea es que Y toma el valor de la parte superior que se está viendo en todo momento y luego lo compara con el valor que tiene cada div. Con un if compara si el valor de Y es igual o mayor al valor de cada div, si es así significa que el usuario está visualizando ese div en cuestión y ahí hace el cambio de background-color.
Los -200 los agregué yo (no estaban en el script original) para que el cambio de color sea "llegando" a la sección y no en el momento exacto.
Código Javascript
:
Ver original$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
var quienes = $('#quienes_somos').offset().top;
var nuestros = $('#nuestros_trabajos').offset().top;
var contacto = $('#contacto').offset().top;
var quienes = quienes - 200;
var nuestros = nuestros - 200;
var contacto = contacto - 200;
if (y >= quienes) {
$('header').css('background-color','rgba(39, 174, 96,0.8');
}
if (y >= nuestros) {
$('header').css('background-color','rgba(243, 156, 18,0.8');
}
if (y >= contacto) {
$('header').css('background-color','rgba(192, 57, 43,0.8');
}
});
});