I am looking to create a functionality where the background-color of my header changes to match the background-color of the div it is currently scrolling past. For example, if the user scrolls to the #about section (which has a green background), I want the header background-color to also change to green. I tried implementing this code snippet below, but unfortunately, it's not working as expected. Any guidance or suggestions on how to achieve this would be highly appreciated.
var target = $('#about').offset().top - 100;
$(document).scroll(function(){
if($(this).scrollTop() > target)
{
$('header').css({"background-color":"green"});
}
});
To see the issue in action, you can view my JSFiddle demo.