A framer sticky header that disappears when you scroll down and reappears when you scroll up is one of the smallest details that makes a site feel modern. It keeps navigation accessible without hogging screen space. In Framer, you can build this behavior without code, and the setup takes minutes.
We build Framer templates for clients across every industry, and sticky headers are one of the most requested features. The good news is that Framer's scroll effects and fixed positioning tools handle almost every sticky header pattern you see on the web. This tutorial walks through the three most useful ones: basic sticky, hide and show, and blur background.
If you want to see how scroll effects work more broadly, our Framer animations tutorial covers the full system.
What makes a sticky header work in Framer?
A framer sticky header stays fixed at the top of the viewport as the user scrolls. The implementation in Framer uses two tools: fixed positioning and scroll variants. Fixed positioning pins the header to the viewport. Scroll variants change the header's appearance based on how far the user has scrolled.
The difference between a sticky header that feels polished and one that feels annoying is subtle. A polished header shrinks slightly, changes background color, or adds a shadow when scrolling. An annoying header stays exactly the same and blocks content. Framer gives you the tools to do the first one.
How do you make a header sticky in Framer?
To create a framer sticky header, select your header frame in the Framer editor. In the properties panel, change the position from relative to fixed. Set the top value to 0 and the width to 100 percent. The header now stays at the top of the viewport regardless of scroll position.
Set the z-index high enough that the header sits above your page content. A value of 1000 is usually sufficient. Without a proper z-index, your content will scroll over the header, which breaks the illusion.
Add a background color to the header. Transparent headers look good on a hero image, but once the user scrolls past the hero, the header needs its own background or the navigation text becomes unreadable against page content. This is where scroll variants come in.
How do you hide the header on scroll down and show it on scroll up?
This pattern is called a smart header, and it is the standard for modern sites. The header hides when the user scrolls down to read content, then reappears when they scroll up to navigate elsewhere.
In Framer, create a scroll variant for your header. Set one variant for the top-of-page state, visible, full height, transparent background. Set another variant for the scrolled state, hidden or compact, with a solid background.
Use the scroll variant trigger to detect scroll direction. When the user scrolls past a set point, switch to the scrolled variant. When they scroll back up, switch back to the visible variant. The exact values depend on your header height, but a common trigger point is 100 pixels of scroll.
Test this on mobile. A smart header is especially valuable on phones where screen space is limited. The same scroll variant logic works on mobile breakpoints, but you may want a more compact header design for smaller screens.
How do you add blur or background color change on scroll?
The blur background effect is one of the most popular header treatments. It gives the header a frosted glass look that separates it from page content without a solid color block.
In Framer, apply a backdrop blur effect to your header's scrolled variant. A value of 10 to 20 pixels of blur usually looks right. Pair it with a semi-transparent background color: white at 80 percent opacity, or your brand color at 90 percent. The combination creates the frosted glass effect.
Add a subtle shadow on scroll for extra depth. A small drop shadow, 0 4px 12px rgba(0,0,0,0.08), lifts the header off the page just enough to feel layered. Do not overdo it; a heavy shadow looks dated.
For color transitions, use Framer's built-in transition settings. A 200 to 300 millisecond ease transition makes the background color change feel smooth and intentional. Instant changes feel broken; slow changes feel sluggish. For more details on Framer's native animation tools, see the Framer documentation.
Which header patterns work best for different site types?
Not every site needs the same header behavior. Here is how we match header patterns to site types.
| Site type | Header pattern | Why it works |
| Portfolio and creative | Transparent on hero, white or dark with blur on scroll | Keeps the hero image unobstructed while maintaining navigation visibility |
| SaaS and product | Compact smart header, hides on scroll down, shows on scroll up | Visitors read long feature pages; the header should get out of the way |
| Ecommerce and conversion | Always-visible sticky header with cart or CTA | Purchase intent needs to be one click away at all times |
| Blog and content | Minimal sticky header, shrinks to thin bar on scroll | Content sites prioritize reading space above all else |
| Landing page | Fixed header with one clear CTA | Landing pages need constant access to the conversion action |
Our Framer custom code guide covers advanced header customizations if you need behavior beyond what Framer's native tools provide. For landing page specific patterns, our landing page design best practices guide goes deeper. You can also browse SaaS templates and landing page templates to see these patterns in action.
Frequently asked questions
Can I make any element sticky in Framer, not just headers?
Yes. Any frame can be set to fixed or sticky positioning in Framer. Sidebars, call-to-action buttons, and table of contents elements can all stick to the viewport as the user scrolls. The same scroll variant logic applies to any sticky element.
Do sticky headers hurt mobile performance?
No, if done correctly. Framer's sticky headers use CSS positioning, which is hardware-accelerated and has minimal performance impact. The key is to keep the header simple: avoid large images, complex animations, or multiple layers in the sticky element. A text-and-links header performs fine on mobile.
Should the header change color on every page?
Not necessarily. Most sites use a single scrolled header style across all pages for consistency. The top-of-page state can vary; a dark header might sit on a light hero on one page and a light header on a dark hero on another. Once scrolled, unify the treatment so visitors always know where to find navigation.
A sticky header is a small detail with outsized impact
Sticky headers are not flashy. They do not win design awards. But they make a site feel more polished, more navigable, and more modern. In Framer, the setup is straightforward, and the scroll variant system gives you precise control over how the header behaves at every point in the scroll.
Start with a basic fixed header. Add a scroll variant for background color. Then try the hide-and-show pattern. Test on mobile. Within an hour, you will have a header that behaves like the best sites on the web.
Browse our Framer templates to see sticky headers in action, or read our Framer animations tutorial for more scroll effect ideas. For content-heavy sites, our Framer CMS tutorial shows how headers work with dynamic content. The difference between a good site and a great one is often just these small, intentional details.
