Sticky Header/Footer Implementation: Full Code Guide

Imagine an e-commerce site with 50,000 products. A sticky header during scrolling takes up 10% of the screen, worsening LCP by 1.5 seconds and increasing CLS to 0.25. On mobile, the 'Buy' button is overlapped by bottom navigation without safe-area. Such problems are solved with production-ready code tested on sites with 100k+ sessions per day. We, a team with 10+ years of web development experience, have implemented sticky elements for over 50 projects. Let's break down the implementation of sticky header/footer with hide-on-scroll, a React hook, and iOS support. If you need a ready solution, order it turnkey with a 6-month warranty.

How does position: sticky work?

position: sticky is a basic tool, but it has nuances. The parent container must not have overflow: hidden, otherwise sticking won't work. It doesn't support 'escaping' on scroll down and may conflict with custom offsets. For simple scenarios it's fine, for complex ones it's not. According to MDN, position: sticky is a hybrid of relative and fixed.

Basic CSS for sticky header

/* Styles for sticky header */ .site-header { position: sticky; top: 0; z-index: 100; background: #fff; will-change: transform; transition: box-shadow 0.2s ease; } .site-header--scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); } /* Hide-on-scroll: hide on scroll down */ .site-header--hidden { transform: translateY(-100%); transition: transform 0.3s ease; } /* Sticky footer with safe-area */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: #fff; border-top: 1px solid #e2e8f0; padding-bottom: env(safe-area-inset-bottom); padding-bottom: max(env(safe-area-inset-bottom), 8px); } /* Sidebar considering header height */ :root { --header-height: 64px; } .sidebar { position: sticky; top: calc(var(--header-height) + 24px); max-height: calc(100vh - var(--header-height) - 48px); overflow-y: auto; overscroll-behavior: contain; } /* Anchor links: scroll-margin-top */ [id] { scroll-margin-top: calc(var(--header-height, 64px) + 16px); } 

Why is transform more effective for hide-on-scroll?

Changing transform does not trigger reflow — the browser processes it on GPU. This is 10+ times faster than modifying top or height. The hide-on-scroll pattern: hide header on scroll down, show on scroll up. Use throttling via requestAnimationFrame to minimize load. A typical implementation in native JavaScript:

const header = document.querySelector('.site-header'); let lastScrollY = 0; let scrollStart = 0; let hidden = false; const THRESHOLD = 100; const HIDE_AFTER = 50; function onScroll() { const y = window.scrollY; const diff = y - lastScrollY; if (diff > 0) { if (!hidden && y > THRESHOLD && y - scrollStart > HIDE_AFTER) { header.classList.add('site-header--hidden'); hidden = true; } } else { if (hidden) { header.classList.remove('site-header--hidden'); hidden = false; scrollStart = y; } } lastScrollY = y; } let ticking = false; window.addEventListener('scroll', () => { if (!ticking) { requestAnimationFrame(() => { onScroll(); ticking = false; }); ticking = true; } }, { passive: true }); 

How to implement hide-on-scroll with a React hook?

On React 18+ we use a custom hook returning states isScrolled and isVisible. This reduces re-renders by 3–5 times compared to direct DOM manipulation. Here's the full hook and component example:

import { useState, useEffect, useRef } from 'react'; interface StickyHeaderState { isScrolled: boolean; isVisible: boolean; scrollY: number; } function useStickyHeader(hideOnScrollDown = true): StickyHeaderState { const [state, setState] = useState<StickyHeaderState>({ isScrolled: false, isVisible: true, scrollY: 0 }); const lastScrollY = useRef(0); const scrollStart = useRef(0); useEffect(() => { let ticking = false; const handler = () => { if (ticking) return; ticking = true; requestAnimationFrame(() => { const y = window.scrollY; const diff = y - lastScrollY.current; setState(prev => { let isVisible = prev.isVisible; if (hideOnScrollDown) { if (diff > 0 && y > 100 && y - scrollStart.current > 50) { isVisible = false; } else if (diff < 0) { if (!isVisible) scrollStart.current = y; isVisible = true; } } return { isScrolled: y > 10, isVisible, scrollY: y }; }); lastScrollY.current = y; ticking = false; }); }; window.addEventListener('scroll', handler, { passive: true }); return () => window.removeEventListener('scroll', handler); }, [hideOnScrollDown]); return state; } export function SiteHeader() { const { isScrolled, isVisible } = useStickyHeader(true); return ( <header className={[ 'site-header', isScrolled ? 'site-header--scrolled' : '', !isVisible ? 'site-header--hidden' : '', ].filter(Boolean).join(' ')} > {/* content */} </header> ); } 

How to avoid content overlapping by sticky header with anchor links?

Add CSS property scroll-margin-top to all elements with id: scroll-margin-top: calc(var(--header-height) + 16px). Or use JS to compute offset and manual scrollTo when clicking anchor links. Without this, anchors will hide under the header, worsening UX.

What is safe-area-inset-bottom and how to use it?

For mobile bottom navigation use position: fixed with env(safe-area-inset-bottom). In <head> add <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">. Compensate the height in content: padding-bottom: calc(60px + env(safe-area-inset-bottom)). This prevents content from being covered by iOS system panels.

What's included in the work?

• Audit of current sticky element implementation with Core Web Vitals measurement.
• Development of custom solution on your stack (React, Vue, Angular, or native JS).
• Integration with existing architecture, including SSR and CSRF protection.
• Performance optimization: eliminating layout thrashing, minimizing reflow.
• Testing on real devices (iPhone, Android, iPad) with different browser versions.
• Documentation and training of your developer.
• Post-release support for 6 months.

Comparison of approaches: sticky vs fixed

Typical mistakes when implementing sticky elements

Work process

1. Analytics — audit of current behavior and Core Web Vitals. Measure LCP, CLS, INP.
2. Design — choose approach (sticky/hide-on-scroll), mobile-first consideration.
3. Implementation — write code with integration into your project. Use modern stack (React 18, TypeScript, CSS Modules).
4. Testing — check on real devices (iPhone, Android, iPad), measure metrics.
5. Deploy — hand over code, documentation, train your developer.

Timeline and cost

Implementation timeline — from 3 to 7 working days depending on complexity. Cost is calculated individually. You save on fixing errors that would occur with self-implementation. Contact us for a project estimate — get a consultation and preliminary calculation within one day. Order sticky elements implementation turnkey with a 6-month warranty.