Sticky CTA Footer — Free HTML CSS JS Scroll Reveal Bar

The sticky CTA footer is the floating call-to-action bar that slides up from the bottom of the page once a visitor has scrolled past the hero — a high-converting, low-friction way to keep your primary action in reach without a blocking popup. This snippet builds it with plain HTML, a glassy CSS bar, and a small rAF-throttled scroll handler.

Reveal after a scroll threshold

The bar starts off-screen, translated down past the bottom edge and at opacity: 0. A scroll handler adds an is-shown class once window.scrollY passes a threshold (about 320px, roughly past the hero), which animates the bar up into view. Hiding it again above the threshold means it tucks away at the very top of the page — so the hero is never covered, and the CTA only appears once the visitor has engaged enough to scroll.

Performance: throttling with requestAnimationFrame

Scroll events fire rapidly, so doing layout work on each one causes jank. The handler is throttled with a ticking flag and requestAnimationFrame: when a scroll fires, it schedules at most one update per frame and ignores further events until that frame runs. This is the standard pattern for cheap, smooth scroll-driven UI — the toggle never runs more than ~60 times a second regardless of how fast the user scrolls.

Smooth slide with a single transform

The show/hide is a pure CSS transition on transform (a translate from off-screen to resting) plus opacity, with an ease-out cubic-bezier so the bar glides in and settles. Animating only transform and opacity keeps the motion on the compositor and jank-free. The bar uses backdrop-filter: blur over a translucent background for a modern glass look that sits well over any content scrolling behind it.

Dismissable, and it stays dismissed

A "Maybe later" button sets a dismissed flag and adds an is-dismissed class that slides the bar away and disables its pointer events; the scroll handler then early-returns so it never reappears for the rest of the session. Respecting a dismissal is what separates a helpful sticky CTA from an annoying one — in production you'd persist the flag to localStorage so it stays hidden across visits.

Responsive content

The bar holds a headline, a supporting line, and two actions. On narrow screens a media query drops the secondary text and the ghost button so the primary action always fits, and the supporting line truncates with an ellipsis rather than wrapping. This keeps the bar a single tidy row at every width.

Customizing it

Change the scroll threshold, the bar copy, or the gradient on the primary button; persist the dismissal to storage; or trigger the reveal from an IntersectionObserver on the hero instead of a pixel value. Pair it with an announcement bar at the top, an exit intent popup, or a cookie banner.