Change color of fixed sitetitel/menu when scrolling down page (according to changing row-background)

maarschalk

Hi Marius,

for some reason, it does'nt seem to work. Either I'm making a mistake in selecting the right class, or a minor thing is wrong in the code?

Best,
Bart

mariusjopen

Dear @maarschalk

I will talk with Armin about that and see what the issue is.

Best!

Marius

mariusjopen

Dear @maarschalk

I debugged the code and it works.

You need to give a row the class blackrow.

<script>
    var offset = 50;
    var $blackRows;
    var $nav;
    
    Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".blackrow");
        $nav = jQuery(".navbar");
        $nav.removeClass("white");
        $sitetitle = jQuery(".sitetitle span");
    });
    
    jQuery(document).on("scroll", function(){

        $blackRows.each(function(){
            var rect = this.getBoundingClientRect();
            if(rect.top - offset < 0 && rect.bottom - offset > 0){
                $nav.addClass("white");
                $sitetitle.text( "NEW TITLE" );
                return false;
            }else{
                $nav.removeClass("white");
                $sitetitle.text( "OLD TITLE" );
            }
        });
    });
</script>

.blackrow {
    background: black;
}

.white {
    background: red;
}

Hope you get it to work!

Best!

Marius

maarschalk

@mariusjopen said in Change color of fixed sitetitel/menu when scrolling down page (according to changing row-background):

.blackrow {
background: black;
}

.white {
background: red;
}

Yes, thanks a lot for the effort Marius!!

Best,
Bart

mariusjopen

Dear @maarschalk

great! A pleasure!

Marius

domphilcox

Hey Marius / Armin, I've been trying to apply the most recent code shared but with no joy. I have no experience in writing JQuery or JS from scratch but have managed to use many of the snippets you have kindly shared in the past. Given that this thread is six years old, I wonder if you could let me know if it should still work as described or if it's no out of date. Any help would be greatly appreciated. Thanks v much.

arminunruh

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

arminunruh

put this js into lay options -> custom css & html -> custom html at bottom

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

by putting this into html at bottom we make sure the site title dom element and nav dom element can be selected cause they were loaded previously.

if we'd put this code into <head then we'd need to wait for jquery document ready or use newpageshown event to select these elements, it doesn't make a huge difference

and put this css into "custom css":

.white {
    color: white !important;
}

.white svg path{
     fill: white;
}

so your code almost worked.

the thing is your site title is a svg, so we need to target the paths of the css to get a fill of white. your css to do that didn't work.

also i improved the js a little so it also checks if we are on a black row when we land on a page, instead of just on scroll.

and you gave the rows a class of "blackrow" which u did correctly, by right clicking an empty spot in the row, choosing "set html class & id" and entering: blackrow for the class

domphilcox

Yes, Armin! You're a legend. To not only look into this, but the tidy up the code AND explain where I went wrong and why it wasn't work, that's incredibly generous of you. I have a feeling your code will be used on plenty of sites in the future. Thanks again.

arminunruh

oh thanks a lot!! :) <3

Lay Theme Forum

Change color of fixed sitetitel/menu when scrolling down page (according to changing row-background)

Before you post:

When you post:

Online Users