Round image of the author with a thin blue line around the image

Vicky Borges

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.

How to create a video background with sticky elements.

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.

Round image of the author with a thin blue line around the image

Vicky Borges

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.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

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.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.