How to create a 'sticky' heading / title on a scrolling page

Community resources
1

I have a website, and to access the various section you scroll through down the page to get to the next section.

Each section has a heading, and at the moment, as soon as you start to scroll, it goes off the page, with the rest of the content.

iw would like be able to make this heading ‘sticky’ so that as you scroll through the section, the heading remains, and only once you get to the end, does it then scroll up and off the page, where it will be replaced by the next section heading.

I have tried to follow the ‘sticky side bar’ tutorial, but this does not seem to work [at least when I have tried].

here is the website: www.studioaltshift.com where you should see each section heading. i.e, work, scope, about, contact, etc.

Any help would be appreciated…

Thanks,

Andrew

2

Hello Andrew,

You did not post your preview link but if you followed tutorial and it still doesn’t work my best guess would be that you set up -overflow: Hidden- on some of the parents of said headings. As soon as you allow overflow on all of the parents of those it should start working once you follow tutorial. You need to allow overflow on everything that is parent of those headings (directly and indirectly) including containers, sections, page wrappers ( Site Mask in your case).

Webflow Experts at Flow Ninja Support Team.

3

Hi Mikic,

Thanks for your response, most appreciated!

in regards to overflow, would you happen to have a link to a tutorial on how to use this?

Also, regarding preview link, what is that, and how would I show it?

Thanks again,

Andrew

4

Hey Andrew,
Glad to be of help!

This is how you can share webflow preview link:

You can learn about overflow here on 13:55