Design Atlas
한국어
▭ Landing page patterns

Sticky CTA

스티키 CTA

A CTA bar that stays pinned to the viewport while scrolling, so the action is always one tap away.

Also known as: Persistent CTA barFloating action bar
···
html
<div class="frame">
  <div class="content" id="content">
    <div class="ln w1"></div><div class="ln w2"></div><div class="ln w3"></div>
    <div class="ln w2"></div><div class="ln w1"></div><div class="ln w3"></div>
    <div class="ln w2"></div><div class="ln w1"></div>
  </div>
  <div class="cta" id="cta"><span>Pro plan · $29/mo</span><button>Start now</button></div>
</div>
css
.frame{width:min(92%,700px);height:min(88%,260px);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;position:relative;background:var(--surface)}
.content{padding:6%;display:flex;flex-direction:column;gap:clamp(8px,2vmin,16px)}
.ln{height:clamp(5px,1.3vmin,9px);border-radius:3px;background:var(--line)}
.ln.w1{width:80%}.ln.w2{width:55%}.ln.w3{width:68%}
.cta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(6px,1.6vmin,12px) clamp(10px,2.4vmin,18px);background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -6px 16px rgba(0,0,0,.06);
  transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cta.show{transform:translateY(0)}
.cta span{font-size:clamp(7px,1.4vmin,11px);color:var(--muted);font-weight:600}
.cta button{font-size:clamp(7px,1.4vmin,11px);font-weight:700;padding:.55em 1.3em;border-radius:7px;
  border:none;background:var(--accent);color:#fff}
js
const cta = document.getElementById('cta');
let shown = false;
function toggle() {
  shown = !shown;
  cta.classList.toggle('show', shown);
}
setTimeout(toggle, 900);
setInterval(toggle, 3200);

The hero's CTA scrolls out of view. A sticky CTA pins itself — usually to the bottom on mobile, the header on desktop — with `position:sticky` or `fixed`, so the same action stays reachable no matter where the visitor is on the page.

Showing it from the very first frame is intrusive, so it typically appears only after scrolling past the hero (or once the original CTA has left the viewport). Pairing it with context — a price, a plan name ("Pro plan · $29/mo · Start now") — usually converts better than a bare button.

Because it floats above content permanently, it needs to avoid colliding with the footer or another CTA band lower on the page — and on mobile, colliding with the keyboard when it slides up is a common bug. Covering too much of the screen undermines the content it's supposed to support.

When to use

Use on long pages that need a lot of scrolling, or on high-stakes conversion pages (checkout, signup). Short pages usually don't need it.