Change colour of sitetitle on black row / backgrounds

[DLB]

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

Hi @arminunruh / @mariusjopen

I'm trying to change the colour of my sitetitle (text) to white for certain areas of a webpage when scrolling, based on when there is a black row – for example, a cover intro section, or a dark colour photo with a viewpoint height of 100%.

Both the sitetitle and the menu are fixed, I’ve managed to successfully get this to work for the menu / nav for both desktop and mobile using Armin’s JS code from this post: http://laythemeforum.com:4567/topic/699/change-link-color-on-fixed-nav-based-on-current-row-background

I noticed that there was also a revised JS code by Marius, to include the sitetitle on this post: http://laythemeforum.com:4567/topic/3704/change-color-of-fixed-sitetitel-menu-when-scrolling-down-page-according-to-changing-row-background

However, after several attempts, I can not get this to work for the sitetitle using Marius’s JS for some reason. I've assigned the required areas with a ‘blackrow’ HTML class / ID, and have added the CSS too – but no luck!

Can you advise and help, please?

Thank you and best,

Des

[mariusjopen]

Dear @Des
the first example you posted is not relevant because it is only for Fullscreen Sliders.

Mine should work:
http://laythemeforum.com:4567/topic/3704/change-color-of-fixed-sitetitel-menu-when-scrolling-down-page-according-to-changing-row-background

Can you share a link to a page where you set it up?

Best!

Marius

[DLB]

Hi @mariusjopen

Thanks for your reply.

I can’t seem to get your code to work for some reason?!

The page I'm referring is currently set to private, whilst being designed. Could I send you the details privately, with a link to this post for reference?

Best,

Des

[mariusjopen]

Dear @Des

it works.

Have a look at my test-oage. It will be online for a couple of days. Open the Devtool Inspector to see the Log messages:
http://www.laytheme.mariusjopen.com/change

<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" );
                console.log("WHITE");
                return false;
            }else{
                $nav.removeClass("white");
                $sitetitle.text( "OLD TITLE" );
                console.log("BLACK");
            }
        });
    });
</script>

I added a log message when a class should get changed.

Try again :-)

Best!

Marius

[DLB]

Hi @mariusjopen

Thanks for your reply, and for the details on the test page.

I've tried again, but no luck – even with the log message!

I've made the page public for a short while so you can see – https://deslloydbehari.co.uk/portfolio/logos

Essentially, I just want the sitetitle text and the menu items text to be white on black backgrounds, then return to the default colour, once scrolled past.

Perhaps I'm not applying the right CSS classes to target the ‘blackrow’ – maybe that's why it's not working?

Thank you again,

D

[mariusjopen]

Dear @Des
it recognises the switch. Now you just need to add the class to the body:

Best!

Marius

[DLB]

Dear @Marius

Thanks for your reply – I've got it to work!

However, I think there might have been some confusion in our correspondence. It's not the actual navbar I wish to turn white – the navbar is actually hidden from from site, but when I made it visible, and added the CSS, your code worked.

I actually just want the sitetitle text and menu text items to change to white, whilst on a black background – https://deslloydbehari.co.uk/portfolio/logos

Could your JavaScript code be adjusted to make this work? Do you have any tips?

Thank you and best,

Des

[mariusjopen]

Dear @Des
great!

Well, you could give the class to the body element.
And then use the CSS hierarchy to trigger the element you need.

<script>
    var offset = 50;
    var $blackRows;
    var $nav;
    
    Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".blackrow");
        $nav = jQuery("body"); // YOU CAN CHANGE THIS
        $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" );
                console.log("WHITE");
                return false;
            }else{
                $nav.removeClass("white");
                $sitetitle.text( "OLD TITLE" );
                console.log("BLACK");
            }
        });
    });
</script>

.blackrow .site-title {
 background: red;
}

.whiterow .site-title {
 background: blue;
}

Did not test it - but it will give you the idea.

Best!

Marius

[DLB]

Dear @mariusjopen

Thank you for the tip – much appreciated!

I’ve got to it work as intended – I changed the class to body, as you noted, then added the following to CSS…

.white .sitetitle span {
    color: white;
}

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

One minor thing, the white sitetitle and white menu only appear when you start scrolling down, is there a way to make them appear when the page is loaded, before scrolling? Any tips? The reason I ask is because some pages will have blackrows with a 100% vh as the first image – see this page as an example – https://deslloydbehari.co.uk/portfolio/logos

Thanks again, and best,

Des

[mariusjopen]

Dear @Des
you could do that with CUSTOM CSS to have it visible on specific pages.

Or you run a Javascript event to make the site title visible on only those pages which you want.

http://laytheme.com/documentation.html#custom-css-styling
http://laytheme.com/documentation.html#custom-javascript

Glad you figured it out!

Best!

Marius

[DLB]

Thanks @mariusjopen

I know I can't use the jQuery(document).ready(function(){ for Lay Theme. But would I need to amend the scroll function – jQuery(document).on("scroll", function(){ to something else, in order for the white sitetitle text / white menu text to load before scrolling?

I'm not sure if CSS would be applicable, as I only need to target certain rows, not the whole page?!

Thanks again and best,

Des

[DLB]

Hi again @mariusjopen

Just following up the above post – additionally I’ve noticed this jQuery code does not work when the scroll bar option is deactivated, when using Lay’s Fullscreen Slider plugin.

As noted above, would I need to change the function?
jQuery(document).on("scroll", function(){

I had to deactivate the scroll bar option in the Fullscreen Slider, as it flickers when using Chrome – looks fine in Safari and Firefox, but for some reason it flickers when testing in Chrome. The auto-scrolling speed is 1000 milliseconds.

Any thoughts?

Thanks and best,

Des

[mariusjopen]

Dear @Des
can you show us a link where it is flickering?

What exactly do you try to achieve?

Best!

Marius

[DLB]

Hi @mariusjopen

Here is a link: https://deslloydbehari.co.uk/portfolio/logos

When using Chrome (macOS) the Fullscreen Slider seems to flicker with the scroll bar displayed, and doesn’t feel as smooth compared to Safari and Firefox. However, when the scroll bar is disabled the slider navigation is much smoother on Chrome. I've also tested on another Mac, with and without the scroll bar, same result.

Subsequently, when the scroll bar is disabled the JS code I've been using, which makes the sitetitle and menu items text white on dark/black rows no longer works as a result, which I think is due to the scroll bar not being displayed?

For reference, here is the JS code, I’m using:

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

        $darkBackgrounds.each(function(){
            var rect = this.getBoundingClientRect();
            if(rect.top - offset < 0 && rect.bottom - offset > 0){
                $nav.addClass("white");
                $sitetitle.text("Des Lloyd Behari");
                console.log("white");
                return false;
            }else{
                $nav.removeClass("white");
                $sitetitle.text("Des Lloyd Behari");
                console.log("dark");
            }
        });
    });
</script>

I've re-enabled the scroll bar on the above website link, so you can see for yourself.

To summarise, ideally I would like to use the Fullscreen Slider, but with the scroll bar visible, but am willing to compromise and not have it visible, to ensure the scrolling on Chrome is smooth. But this now means the above JS no longer works!

If you need any further details, please let me know.

Many thanks,

Des

[mariusjopen]

Dear @Des
maybe you can call the JS whenever the fullscreen slider gets called.

But the flickering when the scrollbar is displayed is weird. That looks like a bug.

We will check this.

Best!

Marius

[DLB]

Thanks @mariusjopen

I thought it might be a bug with Fullscreen Slider – please do let me know when it’s been checked. Ideally, I would prefer the slider with a scroll bar.

For the JS code, I've added a "mousemove" call, that seems to work, when the scroll bar is deactivated on the Fullscreen Slider.

Thanks again for your help.

Best,

Des

[arminunruh]

Hey!

Hey please update the fullscreen slider addon and the stuttering should be fixed.

For the fullscreen slider you could also use the events:

<script>

jQuery(window).on('fpOnLeave', function(obj){
console.log('fp on leave');
console.log(obj.index);
console.log(obj.nextIndex);
console.log(obj.direction);
});

// and
jQuery(window).on('fpAfterLoad', function(obj){
console.log('after load');
console.log(obj.index);
console.log(obj.anchorLink);
});

</script>

[DLB]

Hey @arminunruh

Thanks very much, I’ve updated the slider – works perfectly with the scroll bar in Chrome!

Thanks also, for the events code for the slider – much appreciated! Could I use this to make the white sitetitle and white menu appear on any of the first slides that have a black background before scrolling / moving the mouse?

Best,

Des

[mariusjopen]

Dear @Des
yes. This should work.

Best!

Marius