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

maarschalk · wrote on Sep 25, 2018, 7:33 PM

Thank you Marius

One more question: which custom css code should I use for the sitetitle?

I'm using this one for the menu itself:

nav.primary a{
transition: all 200ms ease;
}

nav.primary.white a{
color: white;
opacity: 1;
}

mariusjopen · wrote on Sep 27, 2018, 10:35 AM

Dear @maarschalk
you can right click on the website to inspect it.

There you can see all the classes you can use.

Hope that helps :-)

Best!

Marius

maarschalk · wrote on Oct 2, 2018, 6:42 AM

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 · wrote on Oct 4, 2018, 3:54 PM

Dear @maarschalk

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

Best!

Marius

mariusjopen · wrote on Oct 12, 2018, 8:50 AM

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 · wrote on Oct 12, 2018, 9:26 AM

@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 · wrote on Oct 14, 2018, 8:47 PM

Dear @maarschalk

great! A pleasure!

Marius

domphilcox · wrote on Apr 3, 2024, 10:05 AM

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 · wrote on Apr 4, 2024, 7:23 PM

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

arminunruh · Apr 8, 2024, 10:14 AM

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 · wrote on Apr 8, 2024, 2:23 PM

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 · wrote on Apr 8, 2024, 2:27 PM

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