Sticky Bar
A sticky bar is a banner that remains fixed to the top or bottom of the screen as a visitor scrolls, keeping a single call to action persistently in view.
Key takeaways
- Position is computed against the viewport, so scrolling never moves the bar.
- Value grows with page length and with how late readers reach a decision.
- It charges permanent viewport rent, which is heaviest on phone screens.
- Attaching after a scroll threshold avoids duplicating a visible hero button.
- On forms and checkouts it competes with the controls it covers.
In depth
A sticky bar is positioned against the viewport rather than the document, so its coordinates are recalculated as the page scrolls and the bar holds a fixed edge of the screen. Its job is to keep one action reachable at every scroll depth on a page long enough that the hero button leaves view early. Many implementations start inline and attach only once the reader passes the point where the original call to action scrolls out, which avoids duplicating a button already on screen.
The value scales with page length and with how late the decision forms. On a short page the primary button is never far away and the bar adds nothing but occupied space. On a long guide it captures intent at the moment it appears rather than requiring a scroll back to the top. The cost is permanent viewport rent: on a phone a bar plus browser chrome can claim a fifth of the reading area, and every reader pays that rent so the minority who click can save a scroll.
The common configuration is one line, one action, attached after a scroll threshold and persistent until dismissed. Teams size it against the smallest viewport they support, respect the device safe area so it does not sit under a home indicator, and confirm it never covers a footer link or a form's own submit button. In a quiz funnel it is the persistent entry point on educational pages, where readers usually decide to act halfway down and the assessment is the obvious next step.
It stops helping wherever the reader is already acting. On a checkout, a long form or an interactive tool, a bar that follows the scroll competes with the controls it sits over and, on a small screen, hides them outright. Familiarity also erodes it faster than a top bar, because it is present continuously rather than briefly at arrival. And no amount of persistence fixes a weak page: the bar makes an action reachable, never more desirable.
Example in practice
How to measure it
Compare conversions attributed to the sticky bar with conversions from the in-page call to action, then look at the combined total rather than either number alone. If bar clicks rose while hero clicks fell by roughly the same amount, the bar moved conversions rather than adding them. That is still worth knowing, because it tells you where on the page readers actually decide.
Segment clicks by the scroll depth at which they happened. A bar earning most of its clicks past the halfway mark is doing the job the pattern exists for; one converting mainly near the top suggests the attach threshold is too early. On mobile, watch time on page and scroll depth after the bar attaches, since a drop in reading depth is the usual signature of obstruction.
Common mistakes
The frequent failure is designing on a desktop screen and shipping to phones. A bottom sticky bar lands over the home indicator, covers the last field of a form, or overlaps the browser toolbar, and the reader loses the control they were reaching for. Test at the smallest supported height with the keyboard open, and hide the bar whenever an input has focus so it never competes with what someone is typing into.
The second is attaching the bar from the first pixel, so it duplicates a hero button already on screen and starts wearing out before anyone needs it. Attach it at the depth where the original call to action leaves the viewport instead. The related habit is loading it with a headline, a secondary link and a countdown, which turns a quiet reminder into an advertisement that readers dismiss on sight.
Frequently asked questions
Do sticky bars hurt mobile usability?
They can if they cover content or overlap native browser controls, which shrinks the usable screen. Keep them thin, test across devices, and allow dismissal to avoid frustrating mobile visitors.
How many CTAs should a sticky bar have?
One. A sticky bar works because it keeps a single, repeated action in view, and adding choices dilutes that focus. If you need more, send the click to a page that presents options.
What is the difference between a sticky bar and a hello bar?
Placement and behaviour. A hello bar sits at the top of the document and scrolls away with the content, so it works on arrival. A sticky bar is fixed to the viewport and stays visible at any scroll depth, so it works during and after reading. Many pages use one or the other; using both at once usually costs more space than it earns.
Should a sticky bar sit at the top or the bottom?
Bottom is usually better on mobile, where the thumb rests near the bottom of the screen and the top is occupied by browser chrome. Top is safer on desktop, where a bottom bar competes with nothing but still reads as an overlay. Whichever edge you choose, check it against the device safe areas rather than assuming a fixed pixel offset.
At what scroll depth should a sticky bar appear?
At the point where the original call to action leaves the viewport, which on most layouts is somewhere between fifteen and thirty percent. Measuring that point on your own page beats copying a percentage, because hero height varies widely. Appearing earlier duplicates a visible button; appearing much later means readers spend part of the page with no reachable action.
How do I stop a sticky bar covering mobile content?
Add bottom padding to the page equal to the bar's height so the last element can still be scrolled clear of it, and use the device safe area inset rather than a fixed offset. Hide the bar while any input has focus, since the on-screen keyboard already removes most of the viewport, and re-check the footer where links cluster near the bottom edge.
Can a sticky bar contain a form field?
It can hold one field and a button, but it rarely should. Focusing an input inside a fixed element opens the keyboard, which reflows the viewport around a bar that is already pinned to it, and the result on some mobile browsers is a field that scrolls under the keyboard. Use the bar to open a form rather than to be one.
Do sticky bars hurt SEO?
Not directly, but they can through the experience signals search engines measure. A bar that occupies a large share of a small viewport or obscures the main content is the kind of intrusive interstitial that guidelines call out. Keep it thin, keep it dismissible, and confirm on a phone that the main content is still the dominant thing on screen.