Sticky Bars and Mobile Chrome: Help or Screen Theft
Sticky buy bars, promo ribbons, chat bubbles, cookie notices and app banners all rent the same small screen, permanently. Audit the stack, keep at most what earns its rent, and never let furniture cover the decision.
The short answer
Every sticky element is a permanent tax on a small screen, so each must pay rent by helping the visit's current decision. A slim sticky bar carrying price and the buy action can pay that rent on a long product page. A promo ribbon, a chat bubble, a cookie notice, an app-install banner and a sticky header all claiming the same screen at once cannot: together they turn the phone into a frame of furniture around a postage stamp of product. Audit the whole stack on a real phone, in the order a visitor meets it, keep the elements that serve this page's job, dismiss or shrink the rest, and make sure nothing sticky ever covers the action, the price or the form being filled.
Inventory the stack as the visitor meets it
Take the screenshot test seriously and in sequence. On arrival: what covers the first screen before any scroll, the banner, the header, the promo ribbon, the cookie notice? While reading: what stays pinned, and what does it displace? At the decision: can the price, the terms and the action all be seen with the furniture present? While typing: does a sticky bar or chat bubble sit on the form or the keyboard's top row? List every element with its owner: theme, app, marketing tool, legal requirement. Most stacks grew by individual decisions, each reasonable, and the inventory is the first time anyone has seen the total. The total is the problem this guide exists to fix.
The sticky buy bar: conditions for keeping it
Keep a buy bar only when the page is long enough that the in-flow action regularly leaves the screen, and the bar carries the actual decision: a product identifier, the price, and the working action, not a slogan. It should appear after the visitor has scrolled past the main action rather than duplicating it from the first pixel, hide while a form field or keyboard is active, and never animate for attention. Test its worth honestly: compare the mobile step rate over whole weeks with it present and absent where your traffic allows a read, and keep the archive honest about which state won. Layout questions of thumb reach are covered in mobile layout; this guide's point is narrower: one helpful bar, not a stack of them.
Promo ribbons and chat bubbles: the usual thieves
The promo ribbon usually advertises an offer the page should state in its own terms line, permanently, at the cost of pushing that line down. If the offer matters, put it in the page; if it does not, the ribbon is noise with a close button. Chat bubbles earn their screen only when a human or a genuinely useful assistant answers promptly during the hours the bubble shows; an unanswered chat promise teaches visitors the business is absent and occupies the exact corner where a thumb expects the action. Where chat matters for considered purchases, consider invoking it from a clear in-page help link instead of a permanent floating tenant, and measure enquiries, not bubble clicks, as its return.
Cookie notices and app banners: necessary, so make them brief
Consent is a legal and ethical requirement handled in the analytics bench, but its furniture is a layout problem too: a notice that covers the offer on arrival, cannot be dismissed without a decision the visitor is not ready to make, or returns on every page after refusal will tax every visit the measurement was meant to improve. Design it compact, dismissible in line with the consent rules, and gone once answered. App-install banners deserve the same discipline: show them where an app genuinely improves a returning customer's life, suppress them in checkout and campaign landing flows, and never stack one above a promo ribbon above a header. Necessary furniture should be the best-designed furniture on the page, precisely because everyone must sit on it.
Collisions, keyboards and the checkout exception
Sticky elements fail worst in combination and at forms. A buy bar over a quantity field, a chat bubble over the payment button, a banner that shifts the page as it loads and adds to layout shift, all detailed in the vitals guide: each collision converts a mild tax into a lost action. Apply a stricter rule as the visitor approaches money: on cart, checkout and form pages, persistent furniture leaves, except a slim header with a help route. Whatever conversion value a promo ribbon has, it is not earned from a person already entering card details. Walk the whole purchase path on a phone with every element switched on, because collisions only appear in the full stack, never in each tool's own preview.
Governance: one screen budget, owned by one person
Stacks regrow because every tool owner can add furniture and nobody owns the screen. Assign the mobile screen a single owner, in a one-person business that is you wearing a named hat, and a simple rule: a new persistent element displaces an existing one or waits. Record each element's rent review in the monthly speed check from the pillar guide: what it did this month, in enquiries, orders assisted or legal necessity, against its screen cost. Elements that cannot state their rent in those terms are removed at the review, kindly and permanently. The screen is the scarcest property the business owns; this guide simply asks that it be let, not squatted.
Sources and evidence on the record
- W3C, Web Content Accessibility Guidelines - the accessibility standard behind the form, error-message and mobile guidance.
- Microsoft, Microsoft Clarity documentation - heatmaps, session recordings and frustration signals such as rage clicks.
Evidence basis: Method guide. Any figure quoted is attributed to a named published source listed below; worked examples are labelled illustrations with round numbers, not measurements. Applies when: Any mobile page carrying more than one persistent element