Hi, it's possible - with Helix Ultimate template, we used this effect many times in our templates. Just check the last two, Podcast and Wimble.

But SPPB wasn't in general designed for this. It's navigation addon don't add extra class name after page scroll-down.

In Template options > Basic > Header > Sticky Header: Yes

Yes, I knew about how to make a it fixed 100% as your second answer. I use the ultimate template today. Where can I make the changes needed? I know how to set it fixed. But the color changes? I feel there need to be some more code?

Use custom CSS using this class

#sp-header.header-sticky

example:

#sp-header.header-sticky .container 
{background: white !important; box-shadow: 0 2px 4px rgba(7,37,68,.06);}

#sp-header.header-sticky .sp-megamenu-parent > li > a 
{color: black;} 

#sp-header.header-sticky .sp-megamenu-parent > li > a:hover 
{color: red;} 

Awsome!

That's nice. It worked great but I realized the width of my header layer was not fluid so I changed to fluid width in my template layout settings. Now the color of the text changes color but the first but the background color doesn't. Any guess why?

What is triggering the switch between the two css? Can I moderate the timing?

Now looks OK, only maybe red shadow is too big.

Yes, I managed to figure out how to make it white. Is there any code I can change so that the white background menu shows up later? I mean after scrolling som distance....

Probably yes somehow but not easy, extra customization is needed. Personally I cannot help.