Link color on fixed nav based on current row

[jspinkus]

Hi, how are you?

I'm using this code to change a link color based on current row, it works okey when the fullscreen slider is deactivated, but I want to use this function with the fullscreen slider on and its not working. Is there a way to do 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");
}
});
});

Thanks as always!

[mariusjopen]

Dear @jspinkus
can you provide a link?

Best!

:-)

Marius

[jspinkus]

Hi @mariusjopen
here is the link with the fullscreen slider activated:
http://studio.juanpinkus.com/

I also did a copy of the same page without the fullscreen slider so that you can see the changing link working when you scroll down to the second row, is the "About" at the top-right:
http://studio.juanpinkus.com/selected-work-2

hope it's easy to solve

Thanks!

[jspinkus]

Hi @mariusjopen

Any idea about this?

Thank you! :)

[mariusjopen]

Dear @jspinkus
you are lucky. That is an easy one.
Each slide has an own class in the body.
For example: For slide number 4: fp-viewing-4

So you can just use this as a parent for your CUSTOM CSS and have each slide with a different CSS.

Hope that helps!

Best!

Marius

[jspinkus]

Hey @mariusjopen
thanks for that!
It works perfectly, and with pure css! don't need the script any more.

Best!
Juan

[mariusjopen]

Dear @jspinkus
great! Happy to hear!

Marius