How do you scroll down past a fixed element?

Design help General
1

Hi all,
In the example below, I tried to add a section beneath it which, after the apple card interaction had finished, would scroll into view, thus bumping the once-fixed elements up and out of the viewport. I was finding it really tricky. Is there any way to do this natively, or is custom code the only option.

If the answer is custom code, would anyone be able to offer any advice? Thanks so much in advance!

Here is my site Read-Only: Webflow - apple-card

2

There are few things, you should take care here.

Apply fixed height like 4000px is not best, it is best to work with VH in this case, like 400vh.

You’ve applied position: fixed to those elements, so you should remember that, it will not play with the normal flow. But still you can add element after stage section but on that element you have to apply position: relative with higher z-index and apply a solid background color.

But if you want to move those element with scroll, after the animation is finished then, there is a different trick here:

  • Apply 400vh to the stage section, and add another DIV inside
  • Place all the element inside this DIV
  • Apply height of 100vh then apply position: sticky with top: 0
  • And to all the element inside, change position: fixed to position: absolute

Try this and let me know what you think.