Sticky CTA
A sticky CTA is a call-to-action that stays fixed in a set position, usually a header or footer bar, so it remains visible as the visitor scrolls the page.
In depth
Technically a sticky CTA uses CSS positioning so the element detaches from normal document flow once the user scrolls past a threshold and pins to the viewport edge. The goal is continuous access: long landing pages often bury the original CTA far above, and a pinned bar keeps the action one tap away no matter how far someone reads. It works best as a thin, low-friction bar rather than a large block, so it reinforces the offer without obscuring content.
In a quiz-funnel context, a sticky CTA carries the "Start the assessment" action alongside the prospect as they read testimonials, sample questions, or social proof. This matters because intent often builds partway down the page, and you want to capture it the instant it peaks rather than forcing a scroll back to the top. A frequent pitfall is making the sticky bar too tall on mobile, where it can cover a third of the screen and frustrate readers; keep it slim, give it a clear dismiss option only if necessary, and ensure it does not overlap form fields.
Example in practice
Frequently asked questions
What is the difference between a sticky CTA and a floating CTA?
A sticky CTA pins to an edge of the layout, typically a full-width header or footer bar, and stays within the document edges. A floating CTA hovers over the content as a compact button or widget, often in a corner, and overlaps the page rather than spanning it.
Can a sticky CTA hurt mobile usability?
It can if it is too tall or covers key content like form fields. Keep it slim, avoid stacking multiple sticky elements, and test on small screens to ensure it does not block the reading experience.
When should I add a sticky CTA to a landing page?
Use one on longer pages where the main CTA would otherwise scroll out of view. On short pages where the action is always visible, a sticky bar adds clutter without much benefit.