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.
Key takeaways
- Sticky CTAs pin to the viewport edge after a scroll threshold, not on page load.
- Bar height is the real cost: every pixel removes mobile reading space.
- Trigger after the hero button scrolls away so the two never duplicate.
- Label the bar with the outcome and time cost, not a generic verb.
- Hide the bar inside forms, modals and quiz steps to prevent overlap.
In depth
A sticky CTA is built with CSS sticky or fixed positioning, so the element leaves normal document flow once a scroll threshold is crossed and locks to the top or bottom edge of the viewport. The browser repaints it on every scroll frame, which is why careful implementations keep the bar shallow and avoid heavy shadows or animation. The bar usually carries one button plus a short restatement of the offer, and it points at the same destination and tracking parameters as the primary in-page CTA.
Two variables govern how a sticky bar performs: when it appears and how much vertical space it claims. Trigger it too early and it duplicates a hero button nobody has scrolled past yet; trigger it late and you lose readers who decide mid-page. Height is the harder trade-off, because every pixel the bar occupies is subtracted from the reading area on a phone, and a bar taller than roughly one line of text starts to feel like an obstruction. More contrast raises noticing, too much invites banner blindness.
In practice teams attach the bar to long pages where the decision is made below the fold: pricing comparisons, case-study pages, and quiz funnel landing pages. On a Pivix scorecard landing page the bar holds the assessment start action, so a reader convinced by the sample questions can begin without scrolling back to the hero. The label should name the outcome and the time cost rather than repeat a generic verb, and the bar should hide itself once the visitor is inside the quiz steps.
Sticky bars help least on short pages, where the original CTA never leaves the viewport anyway. They actively hurt on pages with other fixed elements: a sticky header, a chat launcher and the phone browser's own toolbars can leave a narrow strip of content. Screen reader and keyboard users suffer when the pinned bar sits before the main content in DOM order. And where a page already shows one decisive action throughout, adding a bar contributes noise rather than access.
Example in practice
How to measure it
Track clicks on the sticky bar separately from the hero button using a distinct link identifier, then compare each source's share of total starts. The figure that matters is incremental starts: total conversions on pages carrying the bar against comparable pages without it. If bar clicks rise while total starts stay flat, the bar is only relocating clicks from the in-page button.
Watch scroll depth and mobile exit rate alongside conversion. A bar that costs screen space usually shows up first as shorter median scroll depth on phones, well before it shows up in conversion. Session recordings expose overlap problems that aggregate metrics hide, such as the bar covering a form field. Read every number split by device, because phone and desktop economics differ sharply here.
Common mistakes
The most frequent error is stacking fixed elements without adding up their combined height. A sticky header, a sticky CTA bar and a cookie notice can consume half a phone screen, leaving the visitor to scroll through a keyhole. Measure total pinned height on a small viewport before shipping, cap the CTA bar at a single line of text, and dismiss the cookie layer permanently once a choice has been recorded.
The second is treating the bar as free inventory and filling it with a headline, a price, a countdown and two buttons. Split attention lowers click-through even when the bar is seen more often. Keep one action, and if a secondary option is genuinely needed make it a text link rather than a competing button. The bar must never cover form fields or sit under the on-screen keyboard area.
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.
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.
When should a sticky CTA appear on the page?
After the visitor scrolls past the primary hero button, so the two never compete for the same screen. A threshold tied to the hero's bottom edge is more reliable than a fixed pixel count, because hero height changes with viewport size and translated copy. Showing the bar on load simply gives the page two identical buttons at once.
Sticky CTA or floating CTA: which converts better?
Neither wins by default; they solve different constraints. A sticky bar spans the full width and can carry a short value line, which suits a single decisive action. A floating button occupies one corner and fits better when the action is secondary or the page already has a wide pinned element. Running both at once usually costs more than either gains.
Does a sticky CTA hurt mobile usability?
It can, and the deciding factor is height. One line of text with a comfortable tap target is tolerable; anything taller eats reading space and may cover the on-screen keyboard when a field is focused. Hide the bar while an input has focus or a modal is open, and test with the browser's own toolbars visible rather than in a clean emulator.
Should the sticky CTA text match the hero button?
The promise should match; the wording does not have to. The hero can carry the full framing while the bar restates the outcome in a few words, such as the assessment name and its length. What breaks trust is a bar offering something the hero never mentioned, or pointing at a different destination from the one the reader expects.
How do I stop a sticky CTA from covering the footer?
Give the page bottom padding equal to the bar height, or unpin the bar when the footer enters the viewport using an intersection observer. Both keep legal links, contact details and the privacy notice reachable. Placing the bar as a normal element at the end of the document is the simplest fallback when scripting is unavailable.
Does a sticky CTA affect page speed or layout shift?
The risk is layout shift rather than load time. A bar injected after render pushes content down and registers as cumulative layout shift, so reserve its space in the initial layout or animate it as an overlay that never displaces content. Repainting a shadow-heavy bar on every scroll frame can also cause visible jank on low-end phones.