Streaming live at 10am (PST)

Vertical navigation with fixed elements

Hello everyone.
I would like to create a full screen vertical slider with fixed elements inside every screen.
I made this mockup with full screen divs with fixed background images and a heading with position relative.
Now, I would like to have the heading in a fixed position, just like the background images, but if I do it, they overlay.
So basically I would like the divs to mask them.

This is the public link of the mockup.

If there is a solution for this, I will to apply this navigation to my portfolio website, also made with webflow:
Since the homepage of my website has full size background images, I put the navbar inside each slide, so that I can choose if to use a white or a black navbar, based on the background image.

Thanks in advance for helping!

Watched everything but still have trouble to see what you want, can you do a sketch or something? I’m sure it’s no biggie. Thanks.

Oh, sorry! I’ll try to explain again: If you open the mockup, you’ll see that there is an heading inside every div, and that scrolling it moves, because it’s position relative. I would like it not to move, and to be masked like the background images. The problem is, if I make the headings position fixed, all of them overlay, regardless the masks.

I made a quick sketch in PS just to give the idea.

A rule : a fixed position element is fixed with respect to the viewport, not another element. Therefore since the viewport isn’t cutting it off, the overflow becomes irrelevant.

Giving a Fixed position to an element kind of extract it from the HTML hierarchy so even if you were giving the overflow:hidden property to your sections it would not work.

You need to abandon the idea to make these titles position:fixed and find another way.

That’s what I thought since I haven’t seen anything like that.
Thanks for your answers man!

Although it must totally be doable with Javascript.

1 Like