menu bar typography changing

[Markus]

Is it possible to create a desktop navigation that starts with white typography without background color, but changes the typography to black with a menu bar background when scrolling?

Like here, for example:
https://leicht.com
https://www.dornbracht.com
https://www.vzug.com
https://flos.com

(And adding icons to the menu bar would be great.)

Many thanks – it would be great if this were possible.

[arminunruh]

Hey, can you enable your menu bar in customize - menu styles - menu bar?
Here set up your menu bar to look like you want it.

.navbar{
    opacity: 0;
    visibility: hidden;
}

.scrolled-down-one-window-height .navbar{
    opacity: 1;
    visibility: visible;
}
.scrolled-down-one-window-height .laynav a span{
    color: red!important;
}

.scrolled-down-one-window-height .sitetitle-txt-inner{
    color: red!important;
}

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

Enter this JS in html at bottom:

<script>
    jQuery(window).on('scroll', function(){
        if(window.scrollY > window.innerHeight){
            jQuery('body').addClass('scrolled-down-one-window-height')
        } else {
            jQuery('body').removeClass('scrolled-down-one-window-height')
        }
    })
</script>