Skip to main content
Sannah_Siddique
June 10, 2022
Question

How to create a scrolling section over a fixed section?

  • June 10, 2022
  • 16 replies
  • 28590 views

Hi!

I’m new to Figma & design - but trying to create an interaction on a prototype which involves two sections on one frame. One section would be fixed and is the top part of the frame, whilst the second section would allow me to scroll over the first section.

A reference of the same interaction can be found here on mobile view: [The Classic Check Cashmere Scarf in Mid Camel | Burberry® Official]

Sadly when I fix position when scrolling of the the top section of the frame, and set the second section to vertical scrolling it will scroll underneath the top section which is fixed on scroll.

Any help or advice would be greatly appreciated.

This topic has been closed for replies.

16 replies

Christian_Martin1
December 11, 2023

Exactly. And scrolling over a plain background has the same effect as scrolling normally

Josef_Noah1
December 13, 2023

Did you found the solution ??

Josef_Noah1
December 13, 2023

i said did you find the solution

January 23, 2024

Just set the layer to sticky, and it will stick based on the hierarchy the layer is in. Put the layer in the section of the fixed layers and set the direction of the scroll. Worked for me.

February 28, 2024

I may have figured out a fix on this. I have no idea why it works because it doesn’t really make much sense and I accidentally stumbled upon it.

If you take the layer you want to scroll and move it above all other layers in the parent frame, it will say that it is “fixed”; however, if you look in the prototype bar, it will be labeled as “position: fixed, overflow: vertical”. This will allow the capability of having that layer scroll over fixed layers. You will have to play around with the exact placement of where it will scroll on the screen though by tweaking the frame vs the content within it, because that aspect of it really makes no sense to me either, but it works. Hope this helps.

Arnold Rodrigues
New Member
January 29, 2025
  1. create a frame and add your elements that you want fixed [ keep them as scroll with parent in prototype , open prototype tab and keep that frame as no scrolling in prototype. 
    1. additionally you can keep some components as fixed if you want the elements on top as the regular fixed 
  2. create another frame with the same dimensions as the previous, and add the elements that you want to scroll, now insert this scond frame within the first one which has the fixed elements, and add scroll with parent, but make sure there is atleast one element that overflows the second frame, so that it can scroll, not the frame itself [because the parent frame is set to no scrolling]