Fixed header section with 100vh flex positioning

Design help General
1

Hey Webflow Friends!

I’m trying to get a header section with a flex positioning set to 100vh to also be set to a fixed positioning so that the content below “scrolls over” the header section, like in this example: http://kimrusk.com/

I guess I would need to add a top margin to the section below (mainSection) equal to the height of the headerSection, but how do I get the exact height of the headerSection since its 100vh and depends on the height of the viewport? Would I do this with some jQuery of some sort?

And is this the correct way to achieve what I’m looking for?

Thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/janvier-et-breau?preview=d7acac7d8a9c9478c248ba9982c3726f
(how to share your site Read-Only link)

2

Salut Joel
(tu es de Montréal)?

Voici un démo qui reproduit l’effet que tu recherches:

//

Here’s a quick demo:

Demo:
http://objectslookcloser.webflow.io/

Clone Link:

2 Likes
3

Just add a top padding to the body that’s 100vh.

4

Super, merci Philippe!
Et oui je suis de Montréal, toi aussi?

5

Thanks @Cricitem! Hadn’t thought about that!

1 Like
6

Oui, Montréal aussi.
Toujours cool de rencontrer des gens du coin qui utilise les mêmes outils!

7

@philippe Bien d’accord! Au plaisir de se rencontrer un jour!

1 Like