Solved Is it possible to change the bg color of a section depending on the visibility of another section in

Is it possible to change the bg color of a section depending on the visibility of another section in the viewport?

 

sure. here's the link - https://www.innershaktiyoga.com/home-3/ The menu is sticky. If you click on any item, it scrolls down to that ID. So let's say that the user selects 'why choose us'
the menu-strip should change to orange. and say if the user chooses 'testimonials' the menu-strip should change to white.

 

it doesn't work. Here's the code:

<script>
jQuery(function ($) {
$('.et-menu>li>a').eq(i).addClass('ds-menu-active') $(window).scroll(function () {
var scrollPos = $(window).scrollTop();
$('.ds-section').each(function (i) {
var topPos = $(this).offset().top;
if ((topPos - scrollPos) <= 80) {
$('.ds-menu-active').removeClass('ds-menu-active')
$('#main-header #top-menu a:not(li.centered-inline-logo-wrap a), .et_slide_in_menu_container .et_mobile_menu li a').eq(i).addClass('ds-menu-active')
}
})
});
});
</script>

/* Scroll menu active link*/
.et-menu>li>a.ds-menu-active {
color: #FE437D !important;
}

 

I put it in inspector. And this is what I see (attachment 1). However, it only works when I remove it (attachment 2)

 

works now. kinda. thx. it seems one off as I have a blank section right above the actual section to give an effect of the menu strip bg change.

 

works when I changed it to 230. The only thing that doesn't seem to work is 'contact' Is it because it's already in the viewport when 'our classes' is displayed?

 

thx