Sticky CTAs

Last updated:

Practical patterns for persistent action bars that help without covering the content.

01 — Foundation

Sticky CTAs reduce friction — not add it

Handled badly, sticky actions become floating advertising furniture.

Sticky call-to-action bars keep important actions reachable while users scroll — checkout, save, apply. They should support goals quietly, not dominate the viewport or cover content users are trying to read.

02 — Design

Restrained and purposeful

One primary action — not three competing buttons in a permanent billboard.

  • one clear primary action with obvious purpose — “Continue to payment”, not “Click here”
  • restrained height — especially on mobile; leave room for content
  • padding at the bottom of the page so the last content is not hidden behind the bar
  • avoid multiple sticky layers — bar + cookie banner + chat widget stacks badly

03 — Behaviour

When to stick and when to hide

Constant animation and aggressive show/hide patterns distract.

  • show the bar when the action is relevant — not on every page by default
  • respect reduced motion — no bouncing entrance animations
  • do not cover form fields or focused elements — test with keyboard and zoom
  • coordinate with Sticky Headers — know your z-index stack

04 — Accessibility

Keyboard, touch, and focus

Sticky must not trap users or steal focus from the main task.

  • real buttons or links — visible focus, adequate touch targets
  • content remains scrollable and readable at 200% zoom
  • do not intercept Tab order unexpectedly

05 — Review

Before you approve

A short checklist for sticky CTAs in code review.

  • single purposeful action; bar size is proportionate
  • content is not permanently obscured; motion is restrained
  • keyboard and mobile layouts tested