Skip to main content

Sticky elements or sections

This article describes how you can fix elements or sections

Dmytro avatar
Written by Dmytro
Updated over 2 months ago

With the sticky position, you can keep elements in place on the page—holding them in one spot while the rest of the page continues to scroll. In Onepage, there are two ways to do this: you can either apply it to an entire line or to elements inside a single container. Both options work slightly differently, and in this article we’ll explore each in detail.

In short:

Level

What sticks?

How long?

Sticky Line

The whole Line (all content inside)

Until the next Line reaches and overlaps

Sticky Elements

A single Container inside a Line

Only while the parent Line is visible

Sticky lines

When you make a line sticky, the entire line remains fixed on the screen, including all contained elements (containers or layouts like Grid, Bento, Masonry, Timeline). As you scroll, everything stays visible until the next line comes up from below—then the sticky line automatically slips behind that next line.

You can also stack multiple sticky lines on top of each other, each line stays independently sticky.

⚠️ Important: To achieve the effect of lines stacking behind each other, they need to be part of the same section. Make sure to activate Pro mode for that.

To make a line sticky, hover your mouse over the line you want to stick. A vertical three‑dot button will appear on the left edge (next to the menu), please click it.

Then click on Settings ➡️ the Brush icon ➡️ Add Style ➡️ Sticky position.

Video demonstration - fixed lines

In the following video, we’ll show you how to build a working example from scratch:

Sticky elements

Within a line, you can apply a sticky position to individual containers. Only that one container will then remain sticky - the rest of the line scrolls as usual.

You can, for example, set up two containers side by side in a line.

  • When you make the left container sticky, it remains visible as you scroll,  but only as long as its parent line stays in view.

  • The right container scrolls normally.

Once the entire line scrolls out of view, the sticky container will scroll away too.

To activate the sticky option, hover over the container you want to pin and click the Brush icon in the toolbar to open the style settings. Then click Add Style and choose Sticky position.

Video demonstration - fixed elements

In the following video, we’ll show you how to build a working example from scratch:


💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂

Did this answer your question?