This Scroll-Based Header Will Make Your Website Feel 10x Smoother on Mobile

On smaller screens like phones, every bit of space counts. It’s not ideal to have the navigation bar always visible. One way to fix this is by hiding it when the user scrolls down, and showing it again when they scroll up. In this guide, you’ll build the interaction from scratch using plain HTML, CSS, and JavaScript. We’ll use Vite for local development — it’s fast and makes mobile testing easy. But since we’re only using standard web tech, you can still follow along without Vite if you prefer. Want a quick peek? Here’s the end result: 🔗 Live Demo: View on GitHub Pages 🔗 CodeSandbox: View on CodeSandbox 🔗 Source code githug: View on GitHub 🔗 Live Demo: View on GitHub Pages View on GitHub Pages View on GitHub Pages 🔗 CodeSandbox: View on CodeSandbox View on CodeSandbox View on CodeSandbox 🔗 Source code githug: View on GitHub View on GitHub View on GitHub Setup project npm create vite@latest > Name the project [your-project-name] > Select framework > vanilla > Select variant > Javascript cd [your-project-name] npm install npx vite --host npm create vite@latest > Name the project [your-project-name] > Select framework > vanilla > Select variant > Javascript cd [your-project-name] npm install npx vite --host You’ll see the Vite welcome screen. Thanks to--host, you can now open the site on your phone by entering your computer's local IP. --host Cleanup: Cleanup: Delete src/counter.js In src.main.js remove everything except the CSS import: Delete src/counter.js src/counter.js In src.main.js remove everything except the CSS import: src.main.js import './style.css' import './style.css' in src/style.css, clear it and past the base styling: in src/style.css, clear it and past the base styling: src/style.css :root { font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400;

font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Reset style */ body, ul { margin: 0px; padding: 0px; } ul { list-style: none; } :root { font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400;

font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Reset style */ body, ul { margin: 0px; padding: 0px; } ul { list-style: none; } for the icons I downloaded some svg icons from https://fonts.google.com/icons and put them inside the src/icons folder. You can find the icons here. for the icons I downloaded some svg icons from https://fonts.google.com/icons and put them inside the src/icons folder. You can find the icons here. https://fonts.google.com/icons https://fonts.google.com/icons src/icons icons here icons here Building the mobile layout The structure includes two main sections: the header (logo + nav) and the main content. 📱 On mobile, navigation buttons go at the bottom for easier access.🖥 On desktop, everything stays up top. Here’s the HTML we’re going to use: Site name Projects Articles About Contact

Responsive header Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur lacus quis diam aliquam rutrum at in tortor. Fusce in sollicitudin magna. Suspendisse nec arcu ut ante dignissim finibus eu in ex. Duis dolor sapien, venenatis id viverra nec, scelerisque vel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur lacus quis diam aliquam rutrum at in tortor. Fusce in sollicitudin magna. Suspendisse nec arcu ut ante dignissim finibus eu in ex. Duis dolor sapien, venenatis id viverra nec, scelerisque vel

Site name Projects Articles About Contact

Responsive header Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur lacus quis diam aliquam rutrum at in tortor. Fusce in sollicitudin magna. Suspendisse nec arcu ut ante dignissim finibus eu in ex. Duis dolor sapien, venenatis id viverra nec, scelerisque vel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur lacus quis diam aliquam rutrum at in tortor. Fusce in sollicitudin magna. Suspendisse nec arcu ut ante dignissim finibus eu in ex. Duis dolor sapien, venenatis id viverra nec, scelerisque vel

Start with styling mobile first: a { color: #fff; text-decoration: none; }

a:hover, a:focus { background-color: #646cff; }

.logo { display: inline-flex; align-items: center; padding: 0px 12px; }

.logo-container { background-color: #242424; position: fixed; top: 0; width: 100%; display: flex; padding: 8px; } a { color: #fff; text-decoration: none; }

a:hover, a:focus { background-color: #646cff; }

.logo { display: inline-flex; align-items: center; padding: 0px 12px; }

.logo-container { background-color: #242424; position: fixed; top: 0; width: 100%; display: flex; padding: 8px; } This will make sure the logo is on the top of the page. The a styling makes sure we use the same styling for our links everywhere. The hover and focus make sure the links have the correct state when doing those. Now we will work on the bottom part with the nav: .site-nav { position: fixed; bottom: 0; width: 100%; background-color: #242424; } .site-nav ul { display: flex; justify-content: center; padding: 0px 12px; } .site-nav li { flex-grow: 1; } .site-nav a { display: flex; flex-direction: column; text-align: center; padding: 12px 0px 24px; } .site-nav img { height: 40px; } .site-nav { position: fixed; bottom: 0; width: 100%; background-color: #242424; } .site-nav ul { display: flex; justify-content: center; padding: 0px 12px; } .site-nav li { flex-grow: 1; } .site-nav a { display: flex; flex-direction: column; text-align: center; padding: 12px 0px 24px; } .site-nav img { height: 40px; } Now the navigations are correctly placed on top and bottom, but they covering the content. Also the paragraphs can use some more margin. Let’s fix that by: .content { padding: 48px 12px 110px; } p { margin-bottom: 8px; } .content { padding: 48px 12px 110px; } p { margin-bottom: 8px; } https://codesandbox.io/p/sandbox/headless-glitter-gq69qm?embedable=true https://codesandbox.io/p/sandbox/headless-glitter-gq69qm?embedable=true Creating the desktop layout This looks ok now for mobile, let’s fix the desktop version. We pick a small desktop as minimal width 768px which is 48 rem. Everything above that we consider desktop and gets that styling. Let’s do that with some media queries. The site-header get position:sticky so we can easily put that on on top and stays there.

We need to reset some position:fixed of the header and nav by giving it position:static.

The texts a bit bigger, hide the icons and give more room with padding. The site-header get position:sticky so we can easily put that on on top and stays there. The site-header get position:sticky so we can easily put that on on top and stays there. position:sticky We need to reset some position:fixed of the header and nav by giving it position:static. We need to reset some position:fixed of the header and nav by giving it position:static. position:fixed position:static The texts a bit bigger, hide the icons and give more room with padding. The texts a bit bigger, hide the icons and give more room with padding. @media (min-width: 48rem) { .container { max-width: 960px; margin: 0 auto; } .site-header { position: sticky; top: 0px; display: flex; background-color: #242424; font-size: 1.4rem; align-items: center; justify-content: space-between; padding: 0px 12px; }

.site-nav { font-size: 1rem; }

.site-nav ul { padding: 0px; }

.site-nav, .logo-container { position: static; width: auto; }

.site-nav { display: flex; justify-content: center; }

.site-nav img { display: none; }

.site-nav a { padding: 4px 8px; }

.content { padding: 12px; } } @media (min-width: 48rem) { .container { max-width: 960px; margin: 0 auto; } .site-header { position: sticky; top: 0px; display: flex; background-color: #242424; font-size: 1.4rem; align-items: center; justify-content: space-between; padding: 0px 12px; }

.site-nav { font-size: 1rem; }

.site-nav ul { padding: 0px; }

.site-nav, .logo-container { position: static; width: auto; }

.site-nav { display: flex; justify-content: center; }

.site-nav img { display: none; }

.site-nav a { padding: 4px 8px; }

.content { padding: 12px; } } Now the header is fixed, the nav elements are right aligned. It should look like below, open it in a new tab and resize screen to see the two different layouts. https://codesandbox.io/p/sandbox/old-dust-cmsszy?embedable=true https://codesandbox.io/p/sandbox/old-dust-cmsszy?embedable=true If you think this is already nice then you can stop reading. If you want to save some space by hiding the menu when we scroll down, stick around because we use some javascript for it. Add Scroll-Based Header Behavior Let’s make the header disappear on scroll down and reappear on scroll up. create a new file called scrollHeader.js and add a basic method to check if it’s working: create a new file called scrollHeader.js and add a basic method to check if it’s working: scrollHeader.js export const scrollHeader = (element) => { console.log("node", element); }; export const scrollHeader = (element) => { console.log("node", element); }; 2. inside src/main.js import this method, and let’s add the selector to give the element where we will work with: src/main.js import { scrollHeader } from "./scrollHeader.js"; scrollHeader(document.querySelector(".site-header")); import { scrollHeader } from "./scrollHeader.js"; scrollHeader(document.querySelector(".site-header")); If you inspect the browser console (right mouse click in the browser > inspect element > press console). You should see the output with the found element: 3. Add scroll direction logic. Whenever the user scrolls down, we want to hide the menu. When the user scrolls up it should show the menu again. First we need to make sure that we scroll, and the direction. To verify this works, we log it: export const scrollHeader = (element) => { console.log("node", element);

let direction = ""; let lastY = null;

const onScroll = () => { const { scrollY } = window;

direction = scrollY > lastY ? "down" : "up";

console.log("scroll", direction);

lastY = scrollY; };

window.addEventListener("scroll", onScroll, { passive: true }); }; export const scrollHeader = (element) => { console.log("node", element);

let direction = ""; let lastY = null;

const onScroll = () => { const { scrollY } = window;

direction = scrollY > lastY ? "down" : "up";

console.log("scroll", direction);

lastY = scrollY; };

let direction = ""; let lastY = null;

const onScroll = () => { const { scrollY } = window;

direction = scrollY > lastY ? "down" : "up";

element.classList.toggle(className, direction === "down");

lastY = scrollY; };

window.addEventListener("scroll", onScroll, { passive: true }); }; export const scrollHeader = (element) => { console.log("node", element); const className = "hide-menu";

let direction = ""; let lastY = null;

const onScroll = () => { const { scrollY } = window;

direction = scrollY > lastY ? "down" : "up";

element.classList.toggle(className, direction === "down");

lastY = scrollY; };

let direction = ""; let lastY = null; let isPastOffset = false;

const onScroll = () => { const { scrollY } = window;

isPastOffset = scrollY > offset;

direction = scrollY > lastY ? "down" : "up";

element.classList.toggle(className, isPastOffset && direction === "down");

lastY = scrollY; };

window.addEventListener("scroll", onScroll, { passive: true }); }; export const scrollHeader = (element) => { console.log("node", element); const className = "hide-menu"; const offset = 48;

let direction = ""; let lastY = null; let isPastOffset = false;

const onScroll = () => { const { scrollY } = window;

isPastOffset = scrollY > offset;

direction = scrollY > lastY ? "down" : "up";

element.classList.toggle(className, isPastOffset && direction === "down");

lastY = scrollY; };

if (!isAtBottom && lastY !== null) { direction = scrollY > lastY ? "down" : "up"; } const isAtBottom = scrollY + window.innerHeight >= document.documentElement.scrollHeight;

if (!isAtBottom && lastY !== null) { direction = scrollY > lastY ? "down" : "up"; } 10. Disable scroll behavior on desktop. Now if we refresh on mobile the scrolling works, even at the bottom. If we scroll down and refresh the menu now also opens so the user can navigate without scrolling. Mobile wise everything should work, but if we resize our screen to desktop view and scroll, the scroll logic is being initated and the menu looks off. For desktop views, we don’t need this logic so let’s disable it for those screen size. Instead of listening to an expsensive browser resize event we can watch the media query for changes: const mediaQuery = window.matchMedia("(min-width: 48rem)"); let isDisabled = mediaQuery.matches; const onMediaChange = (event) => { isDisabled = event.matches;

if (event.matches) { element.classList.remove(className); } };

const onScroll = () => { if (isDisabled) return;

const { scrollY } = window; //... rest of code };

mediaQuery.addEventListener("change", onMediaChange); const mediaQuery = window.matchMedia("(min-width: 48rem)"); let isDisabled = mediaQuery.matches; const onMediaChange = (event) => { isDisabled = event.matches;

if (event.matches) { element.classList.remove(className); } };

const onScroll = () => { if (isDisabled) return;

const { scrollY } = window; //... rest of code };

mediaQuery.addEventListener("change", onMediaChange); This code will check if it’s inside the media query. If not it will be set isDisabled to true and it won’t do anything on scroll. We can test this out and most should work but there’s one thing that’s still not correct; when scrolling down on mobile and resize to desktop we can see the menu quickly transition. We can disable this by disabeling the transition for desktop in the css: isDisabled true @media (min-width: 48rem) { /* rest of code */ .logo-container, .site-nav { transition: none; } } @media (min-width: 48rem) { /* rest of code */ .logo-container, .site-nav { transition: none; } } https://codesandbox.io/p/sandbox/musing-spence-6gqtsj?embedable=true https://codesandbox.io/p/sandbox/musing-spence-6gqtsj?embedable=true Cleaning up the code We are done! If you want we can clean some code up, right now we have some hardcode classNames, and selectors we can make that configurable, so next time you use this and want to change you don’t need to change any javascript. Also when listening to events like scroll or media queries with addEventListeners, it’s a good practice to clean these up when you don’t need them. Let’s make the code be able to cleanup, and set some config: export const scrollHeader = ( element, { className = "hide-menu", offsetSelector = "[data-scroll-anchor]", mediaQueryMatch = "(min-width: 48rem)", } = {} ) => { const offsetElement = element.querySelector(offsetSelector); if (!offsetElement) { console.warn(`no ${offsetSelector} has been found`); } const mediaQuery = window.matchMedia(mediaQueryMatch);

// ... rest of code

return () => { window.removeEventListener("scroll", onScroll); mediaQuery.removeEventListener("change", onMediaChange); element.classList.remove(className); }; }; export const scrollHeader = ( element, { className = "hide-menu", offsetSelector = "[data-scroll-anchor]", mediaQueryMatch = "(min-width: 48rem)", } = {} ) => { const offsetElement = element.querySelector(offsetSelector); if (!offsetElement) { console.warn(`no ${offsetSelector} has been found`); } const mediaQuery = window.matchMedia(mediaQueryMatch);

// ... rest of code

return () => { window.removeEventListener("scroll", onScroll); mediaQuery.removeEventListener("change", onMediaChange); element.classList.remove(className); }; }; Now all the hardcoded options are default values, and if we ever want to change some options we don’t need to change the javascript anymore. For example we can use it like: const scrollHeaderCleanup = scrollHeader( document.querySelector(".site-header"), { className: "cutstom-hide-menu", offsetSelector: "[data-scroll-anchor]", mediaQueryMatch: "(min-width: 60rem)", } );

// unmount demo setTimeout(() => { console.log('destroy the component'); // cleanup, do this when the component is unmounted scrollHeaderCleanup(); }, 1000); const scrollHeaderCleanup = scrollHeader( document.querySelector(".site-header"), { className: "cutstom-hide-menu", offsetSelector: "[data-scroll-anchor]", mediaQueryMatch: "(min-width: 60rem)", } );

// unmount demo setTimeout(() => { console.log('destroy the component'); // cleanup, do this when the component is unmounted scrollHeaderCleanup(); }, 1000); Be aware that when changing the mediaQueryMatch or className you also need to change the values of your css. The cleanup method you can fire when the component get’s unmounted. For demo purposes I showed it above with a timeout. To be clear all the config options are not required, so you don’t need to update this and can still use the scrollHeader like: mediaQueryMatch className scrollHeader(document.querySelector(".site-header")); scrollHeader(document.querySelector(".site-header")); Wrapping up You now have a fully responsive header that adapts to screen size and scroll direction. ✅ Works on mobile and desktop

✅ Keeps navigation accessible

✅ No extra libraries needed ✅ Works on mobile and desktop ✅ Works on mobile and desktop ✅ Keeps navigation accessible ✅ Keeps navigation accessible ✅ No extra libraries needed ✅ No extra libraries needed If you have any questions or comments, please let me know! 🔗 Live Demo: View on GitHub Pages 🔗 CodeSandbox: View on CodeSandbox 🔗 Source code github: View on GitHub 🔗 Live Demo: View on GitHub Pages View on GitHub Pages View on GitHub Pages 🔗 CodeSandbox: View on CodeSandbox View on CodeSandbox View on CodeSandbox 🔗 Source code github: View on GitHub View on GitHub View on GitHub