Overlay hero section with sections following it on scroll?

Design help General
1

Hi Nelson and team—

How can tell all sections below my crimson hero section to scroll on top it so it appears that it is being covered by them on scroll? (this is a one page / anchor nav site)

1000×451 108 KB

Thanks! (don’t tell my clients I’m not a webflow master…yet!)

2

Thanks for joining the community! :smiley:

Can you please post your read-only link so we can help out faster?

A Webflow Master, soon you will become.

1 Like
4

Read only link, here is: https://preview.webflow.com/preview/cynple?preview=68f95fc2cdb04c745b4d8c00c7f7a72e

5

Thanks for that :smile:

Try setting your hero row to a FIX position, then push your row under it downwards with a margin-top. You might need to add a background color to all your other rows.

6

My hero section is percent based…it scales according to the percentage set for the large type .svg. So as the hero section is not a defined height, how can I determine the margin-top of following sections?

7

@PixelGeek Any suggestions?

8

Without more info it’s hard to say, but from what it sounds like this is possible with a bit of creative styling.

Just to be certain, your goal is to have the content underneath the hero slide up over the hero when scrolling? Similar to this: http://musicrun.willwong.me/events/the-music-run-austin-texas

Note: the hero in the above link is not a fixed image - it is a fully functional slider with many elements inside it set to position-fixed.

If this is the sort of effect you’re looking for, the read-only link is here:
https://preview.webflow.com/preview/music-run?preview=e41ac30caabd904de3eb202e3e841ffa

If this is not the effect you are describing, can you please post an example of this that is live so we can take a closer look? (or detail out a frame by frame using screenshots)

Thanks in advance! Hope this help :slight_smile:

10

@thewonglv Any chance you can provide me with a simple breakdown of how to do this? I need to understand how to do this in the simplest form.

__

The read-only link you provided doesn’t seem to have content below the splash/hero section and does’t scroll in preview mode…

Thanks.

11

I see the “events drawer” but I do not know how to dissect this…

12

Hi @CynicalKiddo, I would suggest to change the Hero section to a fixed height of say 600px, with a fixed position and then set z-index to 1:

1228×1852 123 KB

Next select the work section and set the top margin to 600px, equal to the height of the Hero Section:

474×814 34.1 KB

Now when the page is run, all content following the Hero section with a z-index greater than 1 will scroll above the hero section. I hope this helps!

13

Hi @cyberdave, as I mentioned, the hero section is not a fixed height and I don’t want it to be; I want it to scale per the percentage of the .svg type. This is why @PixelGeek and your solution offering doesn’t work for me. Soooo, I must find another way :smile:

Any insight here? TY!

14

@cyberdave, thanks again for your assistance. A pow-wow with @PixelGeek revealed I needed some custom code to make it work for this scenario.

Big thanks!

2 Likes
15

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