Cool CSS effect

Have you seen the home page of Dropbox? It is gorgeous! The design is great, the photos are magnificent and it makes use of interesting CSS properties.

One effect that I find neat, but also got me intrigued, was the smooth transition in the fixed navbar. As you can see for yourself, the content of the navbar (logo + links) changes its color according to the background color.

At first, I thought that there must be some JavaScript or at least some complex CSS involved. But no, the effect is actually simple to pull off.

However, it is quite hard to understand the underlying logic. It took me a solid hour to get a grasp of what was going on.

That is why I decided to blog about it and explain step by step how to achieve this cool CSS trick.

Step One: boilerplate

We'll be using Tailwind. The class names should be self-explanatory, but you can check what they do in the Tailwind docs.

We have three full-height section, with different background color. Notice how we repeat the header for each section. This is necessary to get the desired effect.

So far nothing special.

Step Two: fixed navbars

We want our navbars to be fixed when scrolling. So let's make the navbars position: fixed. Now all the navs will be stacked in the top-left corner, the last one (with the blue background) being on top. We also add some padding to the <p> tag to prevent the content from being masked by the navbar.

We want each navbar to disappear when we scroll past its section. For example, the navbar in the red section should be hidden when scrolling into the green section. This is currently not the case, as you can see in the pen below. I made the first two titles longer, so you can better see what is going on.

Step Three: stacking contexts

We need to create a new stacking context for each section. There are different ways of achieving this. In this case, we are going to add a position relative to each section. Why this way? So we can kill two birds with one stone: in the next step we also need our sections to act as relative containers.
Now each navbar is hidden when scrolled past its respective section.

Step Four: clipping regions

We now want to hide the navbar when it is outside of its section. For this, we are going to use the CSS clip-path property. We first need to define the visible area. In our case, this area is the whole section to which belongs a navbar. In CSS, this area is defined by adding an overlay over each section (positioned absolutely and pinned to all edges). But now we can no longer interact with the content of the section. We can solve this problem by simply adding pointer-events: none to our overlays.
Finally, we need to specify that the nav should only be shown when located in its respective section. This is achieved by adding clip-path: inset(0px). This defines the overlay as our cropped area.

I have to admit that I don't fully understand how clip-path works, especially when using percentage instead of pixels. I encourage you to play with this property in the codepen or in the interactive examples on MDN.
For example, try setting its value to inset(150%).

⚠️ Although clip-path: inset(0px) works fine in Chrome, I recommend using Firefox to experiment with different values.
And while we're talking about browser support, the clip-path property is not supported in IE and Edge. However, for the trick presented in this post, you can still use the deprecated clip property: clip: rect(auto, auto, auto, auto)

Learning together

I am far from being an expert at CSS. If I missed something or you have a better solution, feel free to share it with us in the comment section below.
I am really grateful to have found this excellent answer on stackoverflow, which inspired me to write this post.

Comments

[Markel F.]

Hey, is there any way to make both (the nav bar and the content) clickable and interactive? Because the pointer-events: none makes a menu impossible :(
Anyway, this is a really neat effect, it has given me a lot of ideas for websites!

[Jérôme Pott]

Good question!
You need to add pointer-events: auto to each nav tag. I've updated the final pen.

[Andrés Pérez]

Awesome effect, thanks for sharing!

For those of you who might have issues replicating the effect, it looks like pin-t, pin-y, pin-x and the color properties were changed.

You can replace both pin-y and pin-x with just inset-0, and pin-t with top-0.

As for colors, you can find them here tailwindcss.com/docs/customizing-c...

[Gabe]

Really neat effect - may come in handy when making my next portfolio! Thank you for this.

[Jérôme Pott]

I just found out that step 4 is not working properly in Safari 😭
I'll try and figure out the issue. If anybody knows why, please share your solution 🙇‍♂️

[Jérôme Pott]

Silly me! 😅clip-path is still under a prefix in Safari. I've updated the pen and it now works like a charm in Apple's browser. 😋