Sticky

Sticky pins an element in place while the visitor scrolls: the element scrolls normally
until it reaches a chosen spot in the viewport, then locks there while the rest of the page
continues past it. It's the tool for sticky headers, persistent calls to action, and
sidebars that follow the reader. Unlike the other two features in the Animations tab —
entrance animations and
scrolling animations — Sticky doesn't animate the
element's appearance; it controls where the element stays on screen.

Making an element sticky

1. Select the element you want to pin.
2. In the properties panel, click the play icon to open the Animations tab.
3. Expand the Sticky section.
4. Choose a Position — Top, Center, or Bottom.

There is no separate on/off switch: choosing a Position makes the element sticky, and the
remaining controls — Offset, Relative To, and Disable At — appear once a Position is set.
To remove stickiness, reset the Position control by double-clicking its label; the element
goes back to scrolling normally.

The element sticks immediately, in the builder canvas as well as on the live site — scroll
the canvas to watch it hold its position while the page moves.

Position

• Top — the element scrolls with the page until it reaches the top of the viewport,
  then stays pinned there while the page continues underneath. This is the classic
  sticky-header behavior.
• Center — the element locks when it reaches the vertical center of the viewport.
• Bottom — the element locks at the bottom edge of the viewport, staying docked there
  as the page scrolls.

Offset

Offset moves the pinned position, in pixels. With Position: Top, it's the gap between
the top edge of the viewport and the pinned element: an Offset of 40 makes the element
stick 40px below the top edge instead of touching it. (Offset always shifts the pinned
spot downward — with Center or Bottom it moves the element below the center or bottom
edge, so it's mainly useful with Top.) The slider covers 0–100px.

An element that sits at the very top of the page is pinned from the moment the page loads,
so with an Offset it floats that many pixels below the top edge from the start.

Two things to know:

• Offset is responsive — the only setting in the Animations tab that is. Switch the
  builder to another breakpoint and give Offset a different value there. Values are
  per-breakpoint and don't inherit: a value entered at Desktop applies only at desktop
  widths, and a breakpoint where you haven't entered anything uses an offset of 0. Set
  Offset at every breakpoint where you want a gap.
• The WordPress admin bar is accounted for automatically. When you're logged in, a
  Top-pinned element sticks below the admin bar rather than disappearing behind it.
  Logged-out visitors see the element at the exact Offset you set — so don't compensate
  for the admin bar manually.

How long it stays pinned: Relative To

A pinned element lets go when the bottom of its reference area catches up with it — from
that point it scrolls off with the page like normal content. Relative To chooses the
reference:

• Parent and Viewport — the element stays pinned for the rest of the page and is
  released only at the very end. This is also what happens when neither is selected. (The
  two options currently behave identically.)
• Custom — the element stays pinned until the bottom edge of another element, specified
  with a CSS selector in the Custom Selector field, reaches the pinned element. Use
  this to release a sticky element after a particular section: a bar with the selector of
  your second section stays pinned while sections one and two scroll past, then leaves the
  screen with them.

Disable At

Disable At turns stickiness off at a breakpoint. Because breakpoints cascade downward,
the element is not sticky at the chosen breakpoint and everything below it — choose
Tablet Portrait and the element sticks only at Desktop and Tablet Landscape widths;
choose Desktop and it never sticks. Where disabled, the element simply scrolls with the
page. The check follows the live viewport width, so resizing the window or rotating a
device enables or disables stickiness immediately.

Stacking and styling the pinned state

• Content scrolls beneath the pinned element. A pinned element doesn't push the rest
  of the page down — everything after it slides up underneath it. Give sticky elements an
  opaque background, or their content will visually collide with whatever scrolls beneath
  them.
• Sticky elements get no special z-index. While pinned, the element is positioned
  (fixed), which paints it above ordinary content — but any other positioned element on
  the page can still end up on top of it. If something overlaps your sticky element, give
  the sticky element a higher z-index of its own.
• The is-sticky class marks the pinned state. The element carries the class
  is-sticky while it's pinned and loses it when released. Target it with custom CSS to
  restyle the stuck state — for example, adding a shadow to a bar once it detaches from
  the page.

Tips