Streaming live at 10am (PST)

Fixed side nav color change on scroll


#1

Hey Webflow Community!

This is my first time posting on the forum. I need your help.

How do you have a fixed nav with a color change on scroll?

I added a side navigation on the left side. The header text is black initially and needs to change to white text when the side navigaion scrolls from white background to black background.

For example, I want the “Project Decibel” to transition from black color text to white color text when you scroll from “01 Research” section to “02 Synthesis” section. What is the best recommendation?

I have attached images of what I’m referring to.
Here’s my site: http://gloskim.webflow.io/projectdecibelcopy


#2

Hi There & Welcome!!

  1. Fixed Nav
    You can use a couple of ways to do this. First, use 2 navs, one scrolls with browser and the other shows when scrolls to change colors, a sticky nav. Second, use 1 nav, add a background color change upon scroll.

  2. Side Navigation
    Set the interaction on 02 Synthesis, then change Project Decibel text color change as the action.

Not difficult to do. If you need a visual, I can do a quick video with steps. Hope that helps.


#3

Hi Gary,

Thank you for the recommendation. Would you mind sharing a video? I’m fairly new to the interactions… somehow I managed to do what I can here. I have been scratching my head on this for awhile… The interactions have looked very awkward and not seamless at all. :confused:


#4

Hi,
Okay post your read-only link here and I’ll take a look for ya.


#5

Hi Gary,

Here’s the read-only linK: CLICK HERE

The page I am working on is called “Project Decibel Copy”


#6

Excellent, so which section do you want to change. I see the sub nav’s color change when scrolled to section…

Oh oops I needed to be on the copy… okay got it now.


#7

A side navigation fades in after you past “Still intersted?” section.
“Project Decibel” text color is in black. When it gets to the Synthesis and final design sections, the “project decibel” text blends in with the background. I was trying to figure out how to make the text change seamless to white when it gets to those section. Would love to see how you solve this… it’s been driving me crazy.


#8

Yep, gotcha… I’m in your site now trying to give you the best option. The section is long… but give me a sec and I’ll send a short video of the steps…

  1. You’ll need a “Wrapper” around the content so the color change stays all the way through.
  2. Also, move the contents up a little to make change happen earlier.
  3. Since the change is on the same element, you only need to create 1 interaction, then add to 2nd div.

This would be the easiest way to implement - Here ya go:


#9

This is great. Thank you, Gary.

Not sure if you were talking during the video but the audio wasn’t working. Either way, I think I got a grasp of what you did there.

Thank you thank you.


#10

Oh nooooo I can’t stand my voice on anybody’s recorder. I turned that off for real! If you get stumped feel free to message me and … Oh boy… uh… I guess I can muster up some sort of voice-over for ya :nerd_face:

Ha.


#11

Haha. No worries. Your video was extremely helpful.

I completely understand where you’re coming from… I HATE my voice. Also thank you so much. You’ve helped me tremendously.


#12

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.