Nav Bar Interaction Triggers Help

Hi,

I need the nav bar background color changed to white (instead of blue), and the text links changed to black (instead of white), when someone scrolls down the page, right after passing the blue hero section. That’s when I want the change to take place.

I am practicing with this website:
http://eze123.webflow.com/

I really appreciate your help :smile:

Thank You

Hi @eze81, thanks for your question and post. At the moment, you cannot dynamically change the background color or link color using interactions alone, but with a little jQuery pasted into the site’s Footer section, you can accomplish this. Here is some code that you can try out to see if it helps. Paste the following jQuery code into your Custom Code section of Site Settings, in the Footer section:

<script>

$( document ).ready(function() {
  
  var t = $('.anchor-point').offset().top;

$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
        $('.navbar').css({"background-color", "Blue");
        $('.navlink').css({"color","red"});
    }
});
});

</script> 

There are three classes mentioned above.

.anchor-point is the class for the element on your page, what when the scroll reaches that point, the jquery function to change the css style for your navbar background color and navlinks will change.

.navbar is the class name of your navbar
.navlink is the class name for your navlinks

One can use the jQuery css function to update css styles programatically. In the future, we will have more robust support for complex interactions and css changes.

Hopefully that helps to guide you in a direction to go in. Let me know if you have any questions.

Cheers, Dave

Hey Dave,

thanks so much for your help :slight_smile: would love to see this in the next webflow update!

I just need one more touch of your help here…

I added the code, but not sure how to change it…

I want the nav bar to change color, when the browser gets to the section called “white”.

Can you please tell me the exact code so I can copy/paste and see it working?

Then should be easier for me to change it…

I am also making the site public… for better testing purposes.

Thanks!!!

Also, this video: http://tutorials.webflow.com/nav-appears-on-scroll

is it totally outdated???

As I couldn’t find/follow those steps in the current UI…

Hey Dave, maybe for you to get notified I had to write the message here…