Product & Design Advisor
May 9, 2022
Sticky scrolling elements over a video.
Follow along with product and design advisor Vicky Borges to add a video and scroll elements on top of it with sticky position.
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.
Make sure the page header is set to Pinned and Overlap next section is selected
In the next section, add a 1X8 grid
Set the grid’s column width to 1fr
Adjust all 8 rows of the grid to 100vh
Part 2: Add the video and headline.
Add the video to the first row of the grid
Stretch it to fill the cell
Change the video’s position type in the Inspector panel to Sticky
Keep the top offset at zero
Add the headline text over the video in the first row of the grid
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.
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
Center align the phone background element in the grid cell
Dock it to the top
Make sure the top margin units are in viewport height
Set the element to sticky position
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.
The phone background stays in grid row 2
From the Inspector panel, move the wallet and total balance container into row 3
The first currency container moves to row 4
The second one to row 5
The third one to row 6
Add the green button to grid row 7
Drag in the services stack and place it into grid row 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.
Select the phone background container
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
Add a bottom margin of 12.5vh plus 100vh (the size of the last grid row), so 112.5vh
Select the wallet and total balance container
In the Inspector, dock it to the bottom of the grid cell
Change the bottom margin units to vh
Make a note of the value—in this case 58vh
Click undo twice to undo those last two changes
Add a bottom margin with that value plus 100vh, so 158vh
Repeat steps 4 to 9 for the remaining containers and button
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.
Product & Design Advisor
I’m a Product and Design Advisor at Editor X. I have a Bachelor’s Degree in Graphic Design from PUC-RIO and I’m passionate about conceptual design, arts and photography. During my free time I enjoy surfing at Prainha and cooking up an authentic Brazilian barbecue for friends and family.
Did you find this lesson helpful?
Thank you for your feedback!
Related learning resources.
LESSONS & EXERCISES
LESSONS & EXERCISES
Ready to start creating?
People are searching for
Introducing Editor X
Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.
Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.