Sticky index section

1. Add a 1x7 grid to a blank section. From the Inspector panel, under Display, set each row to a minimum of 100vh. Note, you can adjust the total number of rows according to your design.

2. From the Add panel, place an image inside the first row and stretch it.

3. Then add a white container and place it inside the first row, on top of the image. Set the container height to 60px, the width to 100% and dock it to the top.

4. Use a grid to design and place elements like text and SVGs inside the container. Once the design is final, in the Inspector panel, under Position, set the container to Sticky.

5. Duplicate the image and container, then place them inside row 2. Replace the image and container elements according to your design.

6. Select the container in row 2, and set the top offset to 60px. This will ensure the containers don’t overlap as you scroll down.

7. Repeat steps 5 and 6 for the remaining rows in the grid. However, for each container in every additional row add 60px to the top offset. So the container in the 3rd row should have a top offset of 120px, the container in the 4th row should have a top offset of 180px and so on.

8. Go to the Layers panel to arrange the element structure on the page. First arrange the images in order from last to first. Then drag to  rearrange the containers on top of the images and order them from last to first as well.

9.Preview to see the final design.