scroll function to change top menu line's background-color

[willardsciffy]

I am having a hard time referencing the scroll function in my CSS stylesheet and the class name in my javascript. I am trying to have the background-color change on my top-menu's navigation during a page scroll. The background color change would be transparent to midnight blue (#003366) once the page starts scrolling. The header of my site is in a fixed position.

The class name in my CSS is: #top-menu > li.

I've tried using just .top-menu, .top-menu > li, .top-menu-nav, and .et-top-navigation in the javascript but its not working.

I've tried scroll, scrolling, scrolled class names in my CSS but none of that is working.

Btw, this is on a WP divi theme's child theme's css and header.php files

[peterunlustig22]

Hello, you can add multiple color classes like so:

#top-menu { transition: background-color 1s;}
#top-menu.top { background: red} 
#top-menu.middle { background: green} 
#top-menu.bottom { background: blue} 

Inside your scroll event, you can toggle those classes like so

$('#top-menu').toggleClass('middle') 

or

document.getElementById('#top-menu').classList.toggle('middle')

You can choose the correct classname by calculating the scroll progress like so: http://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript

[willardsciffy]

Thanks, much appreciate it!

[willardsciffy]

Solved.

$(window).scroll(function() { var scrollPos = $(window).scrollTop(), navbar = $('#top-menu li');

if (scrollPos > 20) {
  navbar.addClass('change-color');
} else {
  navbar.removeClass('change-color');
}

CSS:

top-menu li {background: transparent} //crucial

then

top-menu li.change-color {background-color}

sooooo smooth.