Pinning a section while people scroll

A header that follows the reader all the way down, an "Add to cart" bar that sits against the bottom of the screen until the description scrolls past. Both are the same setting: Inspector → Advanced → Position, then Stick on scroll.

Scrolls with the page, then stops at the offset below and stays there.

Which means the element keeps its own place in the page — it takes up space normally, and anyone scrolling past sees it there — until it reaches the offset you set. From then on it holds still on screen while the rest of the page slides underneath it.

Two fields come with it:

• Pin to — Top or Bottom. Top is the header. Bottom is the buy bar, the promo strip, the contact bar.
• The offset field under it is the stopping line: 0px sticks against the edge of the screen, 60px stops 60px short of it — which is what you want when something else is already pinned above.

Layer order decides whether the pinned thing stays on top when something overlaps it. The builder fills in 10 for you when you choose Stick on scroll, because leaving it empty lets an element from the section below slide over the header — which looks exactly like the feature being broken. The number is deliberately below the cart drawer and pop-ups, so a header cannot cover the drawer it opens. Raise it only if something still overlaps.

Check this first: is a parent clipping its content?

This is the one trap in the feature, and it reports no error — you choose Stick on scroll, you scroll, and nothing happens at all.

The reason is technical. An element can only stick inside its nearest scrolling area. If any parent above it clips its content (the overflow setting under Advanced), that box becomes the scrolling area — and that box does not scroll, so the element sticks to something that never moves.

The builder says so when it happens, right under the Position field:

A parent element clips its content (overflow), so this will not stick.

If you see that line, stop adjusting the pinned element — go up to the parent and turn off the clipping there.

Changing how it looks at the moment it pins

A header sitting quietly at the top of the page and a header travelling with the reader should not look the same. Once it pins it wants a shadow to separate it from the content sliding under it, and usually less height, to give the screen back to what people came for.

Once you have chosen Stick on scroll, a line appears under the Position field:

Style it when pinned →

Click it. The State row at the top of the Advanced tab moves to Pinned, and from that moment everything you adjust — Background, Border and shadow, Spacing, Size, Layout, Typography — applies only while the element is pinned. Its normal look is untouched. Click Default to go back to styling that.

The canvas shows the pinned look while you are in that state, so you can see what you are doing without publishing and scrolling to check.

The transition between the two is added for you: the shadow arrives and the height contracts smoothly over about a fifth of a second rather than snapping. You do not have to set anything up for that — and if you do set your own transition, yours is kept.

The things inside it can change too

This is the part worth knowing. The Pinned state is not only on the element that pins — everything inside it has one as well.

Select the logo inside a pinned header, open the Advanced tab, switch to Pinned, and drop its height. The result: the header behaves normally as the page scrolls, and the moment it pins the logo shrinks. The same way, a tagline can disappear on pinning to make room while the menu stays.

Nothing needs wiring together: the child does not need to know what pinned it, only that it sits inside it.

Remember that each screen size is separate

Both Position and the Pinned look are per screen size, following the spreading rule in Styling for phones.

Two common setups:

• Pin on desktop, release on mobile — on a small screen a sticky header costs a real share of the reading area. Switch to the Mobile size and set Position back to In flow.
• Pin on both, but contract harder on mobile. Switch to Mobile, go to Pinned, and take the spacing and type size down further.

On the published page

A pinned element works out for itself when it is stuck, on the real page, with nothing for you to set up. And if you do not use the Pinned state, the page gets no heavier for it — the clever part is only downloaded when there is actually a pinned look to show.