Sticky CTAs & Bars

A sticky CTA is a button or bar that stays on screen while the visitor scrolls. It can be a fixed header, a bottom bar, or a floating button. The main action stays one tap away, wherever the visitor is on the page.

How it works

The farther a visitor is from the buy button, the less likely they are to click it. If someone is convinced by a review halfway down the page, scrolling back to the top is enough friction to lose some of them. A sticky CTA removes that distance. This matters most on mobile, where pages are long.

How to do it

1. On mobile product pages, add a bottom bar with the product name, price, and “Add to cart.”
2. Show the bar only after the original CTA scrolls out of view.
3. For site-wide offers, add a slim top bar, for example “Free shipping over $50.”
4. On long landing pages and articles, add a small floating button that appears after the visitor scrolls part way.
5. On pricing and comparison pages, keep the selected plan and a “Select plan” button pinned while visitors scroll the feature table.
6. A/B test sticky versus non-sticky. Watch conversion rate, scroll depth, and bounce rate.

What to measure

• Sticky CTA click rate: Share of visitors who click the sticky element.
• Conversion rate lift: Page conversion rate with the sticky CTA on versus off.
• Scroll depth at click: How far down the page visitors are when they click. It shows which sections lead to action.

Best practices

• Show the sticky CTA only when the static CTA is out of view.
• Keep mobile bars slim, around 10% of screen height or less.
• Include the price and plan name in the bar, not just a button.

Common pitfalls

• Making sticky elements so large they cover content.
• Using full-width sticky bars on reading pages such as docs and help articles. Use a small floating button instead.
• Stacking a sticky header, cookie banner, and bottom bar at once. Together they can cover a large part of a phone screen.