Top bar menu : Change the background color on scroll

Hello,

What i would like to do is easy to explain but it seems a little bit tricky.

I would like the background color of the menu (#ffffff) at the “beginning” and with another color (#6D071A) when we go down / scroll.

I have done an example : https://codepen.io/unmick/pen/ywZxQO

I really don’t know how to make it simple.

Thanks for any help!

I went forward but i have still an issue.
I share it if it could help!

I have added in the JS part the following code:
$(’.stick’).on(‘sticky.zf.stuckto:top’, function(){}).on(‘sticky.zf.unstuckfrom:top’, function(){})

It’s add the class “.is-anchored” where i have added some css code.

I have updated my example : https://codepen.io/unmick/pen/ywZxQO

The issue i still have is that the system automatically add a height :

and i don't know how to set it at 0 by default.

Thanks