4 Pure CSS3 with JSPublished 2026-10-05Free · no sign-up
Seven sticky navigation patterns: a bar that sticks to the top, one that hides while you scroll down, a header that shrinks once you leave the top, a translucent blurred bar, a scrollspy that highlights the current section, a mobile tab bar stuck to the bottom and a two-tier header where only the main nav sticks.
A navbar that stays at the top as the page scrolls, with position: sticky; top: 0 and a solid background so content does not show through. Because sticky stays in the flow, there is no gap or jump when it starts sticking.
The navbar slides away when you scroll down to read and comes back the moment you scroll up, saving space on small screens. A scroll listener compares positions; the bar never hides while anything inside it has keyboard focus.
View code
<div class="snb2" tabindex="0" role="region" aria-label="Article, scroll"><nav aria-label="Main"><a href="#home">Journal</a><a href="#subscribe">Subscribe</a></nav><article><p>Scroll down and the bar hides.</p><p>Scroll up a little and it returns.</p><p>Reading space matters on phones.</p><p>Keep scrolling.</p><p>Almost there.</p><p>The end.</p></article></div>
var box = document.querySelector('.snb2'), nav = box.querySelector('nav'), last = 0;
box.addEventListener('scroll', function () { var y = box.scrollTop; if (!nav.contains(document.activeElement)) box.classList.toggle('up', y > last && y > 60); last = y; }, { passive: true });
03. Navbar That Shrinks When Scrolled
StickyShrink
A tall header with a large logo becomes a slim bar once you scroll past the top. A class toggled by an IntersectionObserver sentinel changes the padding and logo size, and transform keeps the logo shrink smooth.
var box = document.querySelector('.snb3');
new IntersectionObserver(function (es) { box.classList.toggle('small', !es[0].isIntersecting); }, { root: box }).observe(box.querySelector('.sent'));
04. Translucent Blurred Navbar
StickyGlass
A sticky bar with a semi-transparent background and backdrop-filter: blur, so colourful content passes underneath as a soft blur. The background stays opaque enough on its own for the links to keep contrast if blur is unsupported.
The sticky nav highlights the link for the section currently in view and moves aria-current with it, so the highlight and the announced state agree. An IntersectionObserver with a band in the middle of the view picks the active section.
View code
<div class="snb5" tabindex="0" role="region" aria-label="Guide, scroll"><nav aria-label="On this page"><a href="#snb5a" aria-current="true">Plan</a><a href="#snb5b">Build</a><a href="#snb5c">Launch</a></nav><section id="snb5a"><h3>Plan</h3><p>Define the goal.</p></section><section id="snb5b"><h3>Build</h3><p>Make the first version.</p></section><section id="snb5c"><h3>Launch</h3><p>Ship and measure.</p></section></div>
var box = document.querySelector('.snb5'), links = box.querySelectorAll('nav a');
var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (!e.isIntersecting) return; links.forEach(function (l) { if (l.getAttribute('href') === '#' + e.target.id) l.setAttribute('aria-current', 'true'); else l.removeAttribute('aria-current'); }); }); }, { root: box, rootMargin: '-40% 0px -55% 0px' });
box.querySelectorAll('section').forEach(function (s) { io.observe(s); });
links.forEach(function (l) { l.onclick = function (e) { e.preventDefault(); var s = box.querySelector(l.getAttribute('href')); box.scrollTo({ top: s.offsetTop - 50, behavior: 'smooth' }); }; });
06. Sticky Bottom Tab Bar
StickyMobile
A mobile app tab bar that sticks to the bottom of the screen, with icons above short labels. Labels are always visible, because icon-only tab bars are harder to learn, and the bar includes safe-area padding for phones with a home indicator.
A thin utility bar (phone number, language) scrolls away normally while the main navigation below it sticks. Only the second element is sticky, which is all it takes, so the page keeps its main links without wasting space on the utilities.
position: sticky; top: 0 keeps a nav at the top without taking it out of the flow, so nothing jumps when it starts to stick. Give it a background so content does not show through.
Know when it is stuck
For a shadow or a smaller size once the bar is floating, watch a one-pixel sentinel above it with an IntersectionObserver and toggle a class when the sentinel leaves view.
Hiding needs care
A nav that hides on scroll down saves space on phones, but it must reappear on any scroll up and never hide while a link inside it has focus.
Scrollspy that tells the truth
When the nav highlights the section in view, move aria-current along with the highlight so screen readers hear the same thing people see.
Frequently asked questions
Why is my sticky nav not sticking?
Usually an ancestor has overflow set, or the nav is the last thing in a short parent with nowhere to travel.
Does a sticky nav cover anchor targets?
It can. Set scroll-padding-top on the scroller to the nav's height so jump links land below it.
Is backdrop-filter supported?
Yes in current browsers; keep a mostly opaque background so it still works without blur.