Placing sticky scrolling elements over a video

Before you get started

In this example, we’ll create a crypto wallet site with a video and several sticky elements to create an interactive scroll effect. To follow along, open up the template in the editor and save each component to your site assets. These include the background video, the headline text, the phone background container, the wallet and total balance container, the three cards with different currencies, the green button and the services stack.

Then add a new page to re-create this design as you follow along.

Part 1: Set up your site

1. Make sure the page header is set to Pinned and Overlap next section is selected

2. In the next section, add a 1X8 grid

3. Set the grid’s column width to 1fr

4. Adjust all 8 rows of the grid to 100vh

Part 2: Add the video and headline

1. Add the video to the first row of the grid

2. Stretch it to fill the cell

3. Change the video’s position type in the Inspector panel to Sticky

4. Keep the top offset at zero

5. Add the headline text over the video in the first row of the grid

6. Use the alignment tab in the Inspector to center the headline in the section

Part 3: Add and align the sticky elements

To add our sticky elements precisely, we’ll add them all together in the second grid row first. Once we have the position settings right, we’ll move each one into its own grid row.

1. Start by adding the components we need: the phone background, the wallet and total balance, 3 cards and the green button in grid row 2

2. Center align the phone background element in the grid cell

3. Dock it to the top

4. Make sure the top margin units are in viewport height

5. Set the element to sticky position

6. Copy the value of the top margin, 12.5vh, and set that as the Top offset

Now we’ll repeat these steps with the rest of the elements. Make sure they’re all centered horizontally and docked to the top with the top margin in vh. Set each one to sticky position, and use the top margin value as each element’s top offset. The top margin/top offset values for the remaining elements are:

• Wallet and total balance stack: 21vh

• First currency card element: 45vh

• Second currency card element: 55vh

• Third currency card element: 65vh

• Green button: 75vh

Note: Best practice here is to position elements by selecting them and using the Inspector panel. If you drag and drop you might unintentionally re-parent an element.

Part 4: Reposition elements in separate grid rows

When all the elements are positioned and have the correct settings in the second grid row, we’ll move each one to separate grid rows, but with the same position.

1. The phone background stays in grid row 2

2. From the Inspector panel, move the wallet and total balance container into row 3

3. The first currency container moves to row 4

4. The second one to row 5

5. The third one to row 6

6. Add the green button to grid row 7

7. Drag in the services stack and place it into grid row 8

8. Center align it in the cell

Part 5: Adjust the services container

When we preview the site, the services container scrolls up to cover the sticky elements. We don’t want this behavior, so we’ll go in and add bottom margins on each sticky element to prevent it. Start by using the Inspector panel to help calculate the distance we need for the bottom margin.

1. Select the phone background container

2. We already know the top margin is 12.5vh. Because this element is aligned to the center, we know the bottom margin will be the same on top and bottom

3. Add a bottom margin of 12.5vh plus 100vh (the size of the last grid row), so 112.5vh

4. Select the wallet and total balance container

5. In the Inspector, dock it to the bottom of the grid cell

6. Change the bottom margin units to vh

7. Make a note of the value—in this case 58vh

8. Click undo twice to undo those last two changes

9. Add a bottom margin with that value plus 100vh, so 158vh

10. Repeat steps 4 to 9 for the remaining containers and button

11. Preview one more time

Result: The video remains in place as a background and when you scroll the different elements move up into view and then stick in place.