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

---

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

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

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

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

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;
}

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

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

Dear @maarschalk

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

Best!

Marius

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

@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

Dear @maarschalk

great! A pleasure!

Marius