Text Color based on current row-background

[stdhd]

Hi there,

I've tried this code to change text based on current row-background and it works for desktop perfect.

But not on mobile. Can I put the code elsewhere for mobile?

For testing: I've tried to set Phone Breakpoint to „0“ and it works but not with setting "600“. Is there any easy solution for this?

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");
            return false;
        }else{
            $nav.removeClass("white");
        }
    });
});

Source: http://laythemeforum.com/topic/699/change-link-color-on-fixed-nav-based-on-current-row-background

Thanks!

[mariusjopen]

Hi @stdhd
did you try to put it into the other Custom HTML Fields?

Can you post a link to your website?

All the best!

Marius

[stdhd]

Thank you Marius. Yes tried different Custom HTML Fields. Desktop works fine in all fields. I've send you a chat message with development link.

[mariusjopen]

Hehe :-)
When you add the class via jQuery you add it to the navigation.
The navigation does not exist on mobile. There we use a different navigation.

In general it is good to add this kind of classed to the body.
Then you can use them for all the elements you like.

I hope that helps!

Best!

Marius