Lay Theme Forum

Re: Change nav and logo text to white/black when scrolling

Hi!

I use the code of this thread (white text on .darkrow / .blackrow) to change the color of my sitetitel and menu when scrolling over dark background (via jQuery) and combined it with sticky rows (via css).
Have a look here: https://www.maxbrunnert.de/portfolio-neu/

But I have two problems I don't get solved:

when the sitetitel/menu changed to white once, it does not change back to black
the underline color of my menu does not change. for the underlining of sitetitel it works...

Could someone help me? I guess there is an error because of the combination

This is the code I use in custom CSS:

.white {
color: white!important;
}

/* Sticky Row */
.sticky-row {
position: sticky;
top: 0;
}

/* Dark Row + Sticky Row */
.sticky-blackrow {
background: transparent;
position: sticky;
top: 0;
}

And this in Custom HTML at bottom:

<!-- Dark Row -->
<script>
    var offset = 50;
    var $blackRows;
    var $nav;
    
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".blackrow");
        $nav = jQuery("nav a, .sitetitle span");
        $nav.removeClass("white");
    });
    
    jQuery(document).on("scroll", function(){
        $blackRows.each(function(){
            var rect = this.getBoundingClientRect();
            if(rect.top - offset < 0 && rect.bottom - offset > 0){
                $nav.addClass("white");
                return false;
            }else{
                $nav.removeClass("white");
            }
        });
    });
</script>

<!-- Dark Row + Sticky Row -->
<script>
    var offset = 50;
    var $blackRows;
    var $nav;
    
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".sticky-blackrow");
        $nav = jQuery("nav a, .sitetitle span");
        $nav.removeClass("white");
    });
    
    jQuery(document).on("scroll", function(){
        $blackRows.each(function(){
            var rect = this.getBoundingClientRect();
            if(rect.top - offset < 0 && rect.bottom - offset > 0){
                $nav.addClass("white");
                return false;
            }else{
                $nav.removeClass("white");
            }
        });
    });
</script>