A sticky CTA uses fixed or sticky positioning to keep a button or bar visible while the rest of the page scrolls. Common forms include a header with a persistent “Start free trial” button, a bar fixed to the bottom of mobile screens, or a sidebar box on long articles. It removes the need to scroll back to find the action, which matters most on long pages and small screens.
When it helps
Long feature pages, pricing pages and in-depth articles often have their main CTA at the top and bottom only. Visitors who decide in the middle must hunt for it. A sticky element keeps the action available at the moment of decision.
Design and technical details
Sticky elements take screen space permanently, so keep them slim, especially on mobile. They must not cover content, form fields or the browser's own controls, and they should not appear until the main hero CTA has scrolled out of view, so the page does not show two identical buttons at once.
- Keep height small on mobile and avoid stacking several sticky bars.
- Account for the on-screen keyboard: hide the bar when a form field is focused.
- Respect safe areas on phones with notches or home indicators.
- Make sure it does not hide focused elements for keyboard users, which WCAG 2.2's Focus Not Obscured criterion addresses.
- Avoid layout shift when the bar appears.
.cta-bar {
position: fixed;
bottom: 0;
inset-inline: 0;
padding-bottom: env(safe-area-inset-bottom);
}Measuring the effect
Track sticky CTA clicks as a separate event from the in-page buttons. Compare total conversions with and without the sticky element, because it can simply move clicks from one button to another without adding any.
Example
A mobile bar on a long feature page
Hypothetical inventory app Thistledown adds a slim bottom bar on mobile with “Try it free” after visitors scroll past the hero. The bar hides when a form field is focused. The team compares trial starts per mobile session over two equal periods and checks that layout shift stays low.
Common mistakes
Covering content
A sticky bar that hides the last lines of text or a cookie banner's buttons frustrates visitors. Add padding so content can scroll clear.
Too many sticky layers
A sticky header, a chat widget, a cookie bar and a CTA bar together can eat a large part of a phone screen.
Questions
A small bar that leaves content readable is generally not what Google's interstitial guidance targets. One that covers much of the screen could be treated differently.
