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 hereif(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 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 -
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it