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

[maarschalk]

Re: Change link-color on fixed nav based on current row-background

Hi,

I'm having the same question as the one already answered in the topic above. Only one extra favour to ask :) : could you please add the code to change the sitetitle as well? Code in topic above only changes the menu (nav) and not the sitetitle (text)

Thanks a lot!

Bart

[mariusjopen]

Dear @maarschalk
You need to add the part to change the site title here

if(rect.top - offset < 0 && rect.bottom - offset > 0){
                $nav.addClass("white");
                return false;
            }else{
                $nav.removeClass("white");
            }

Under:
$nav.addClass("white");

And back under:
$nav.removeClass("white");

You can use this:
http://api.jquery.com/text/

Best!

Marius

[maarschalk]

Hi Marius,

thanks for the quick respons. However, even with the link to the website I actually have no idea what to do :-) Is it possible for you to write the code? Don't know how much work it is. If its a big effort, I can always try to find someone who does know something about coding of course.

Thanks again,
Bart

[mariusjopen]

Dear @maarschalk
I did not test it – but this should work:

<script>
    var offset = 50;
    var $blackRows;
    var $nav;
    
    Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".blackrow");
        $nav = jQuery("nav");
        $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");


jQuery( ".sitetitle span" ).text( "NEW TITLE" );

                return false;
            }else{
                $nav.removeClass("white");

jQuery( ".sitetitle span" ).text( "OLD TITLE" );

            }
        });
    });
</script>

Let me know :-)

Marius

[maarschalk]

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]

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]

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