Sticky Product Bar — Free HTML CSS JS PDP Snippet

On a long product detail page, the Add to cart button at the top scrolls out of sight, and a shopper who has just decided to buy now has to scroll back up to find it. The sticky product bar fixes this: once the main CTA leaves the viewport, a compact bar slides in from the top of the screen showing the product thumbnail, name, price, and an Add to cart button — keeping the purchase action one tap away no matter how far the shopper has scrolled. Apple, Nike, and most modern storefronts use this pattern. This component builds it in HTML, CSS, and vanilla JavaScript using IntersectionObserver — no scroll-event handler.

Why IntersectionObserver instead of a scroll listener

The naive way to do this is a scroll event that checks the CTA's position on every frame. That runs JavaScript continuously while scrolling and is a classic cause of jank. IntersectionObserver is the modern alternative: you tell the browser to watch the hero CTA and notify you only when its visibility crosses a threshold. The browser does this off the main thread and fires the callback just twice — when the button leaves the viewport and when it returns. The bar toggles its visible class on !entry.isIntersecting, so it appears exactly when the main CTA is gone and hides when it comes back.

The slide-in transition

The bar is position: fixed at the top with z-index: 50 and starts hidden with transform: translateY(-100%) — pushed entirely above the viewport. Adding the visible class animates it to translateY(0) with a cubic-bezier(0.32, 0.72, 0, 1) easing that gives a quick, slightly springy slide. Because it animates transform (not top or height), the motion is GPU-accelerated and smooth. The reverse — sliding back up when the hero CTA returns — uses the same transition automatically.

The frosted-glass bar

The bar has a translucent white background with backdrop-filter: saturate(180%) blur(12px), the frosted-glass effect that lets page content blur through behind it — the same treatment as the iOS and macOS toolbars. This keeps the bar visually light while still separating it from the content scrolling underneath. A subtle bottom border defines its edge.

A compact, truncating layout

Inside, a small gradient thumbnail sits beside the product name and price, with the CTA pushed to the right by justify-content: space-between. The product name uses white-space: nowrap with text-overflow: ellipsis so a long title truncates cleanly rather than wrapping and breaking the bar's single-line height. This mirrors the hero section above, which has the full product image, rating stars, description, and the primary CTA the observer is watching.

Synced CTAs

Both the hero CTA and the bar CTA are wired to the same action — here a simple "Added ✓" confirmation that resets after 1.4 seconds. In production both would call your real add-to-cart logic. Because they share a handler, the shopper gets identical behaviour whether they click the button in the hero or in the sticky bar.

Customisation

Point the observer at whatever element marks "the CTA is gone" — it watches .spb-cta here, but you could watch the whole hero section instead. Adjust rootMargin to make the bar appear a little before or after the CTA fully leaves (e.g. -80px 0px 0px 0px triggers it 80px sooner). Swap the #6366f1 accent and the gradient thumbnail for your brand, replace the placeholder letters with a real product image, and connect both CTAs to your cart. On mobile (under 600px) the hero stacks to one column while the bar stays pinned.