Sticky header: position: sticky en verbergen bij scrollen
Gids voor sticky headers
Sticky header CSS: position sticky, krimpen, verbergen bij scrollen | We.Inc
Maak een sticky header met position: sticky en voeg daarna krimpen en verbergen bij scrollen toe. Live demo, ankeroffsets met scroll-margin, z-index-oplossingen en een kleine React-hook.
Geef de header position: sticky en top: 0, plus een achtergrond en een z-index, en hij blijft vastgezet terwijl de pagina scrolt. Hij blijft alleen plakken binnen zijn parent, en een voorouder met een overflow-instelling kan hem tegenhouden. Voor een header die verdwijnt bij scrollen schakelt u een translateY-class in vanuit een scroll-listener.
sticky tegenover fixed voor headers
position: sticky
position: fixed
Neemt ruimte in de layout in
Ja
Nee, voeg padding toe aan de body
Vastgezet ten opzichte van
Dichtstbijzijnde scrollende voorouder
De viewport
Heeft een inset nodig zoals top: 0
Ja, anders gedraagt het zich als relative
Meestal
Maakt een stacking context
Ja
Ja
Stopt aan het einde van de parent
Ja
Nee
Sticky headers zijn één regel CSS, totdat ze dat niet meer zijn: de header wil niet blijven plakken, ankerlinks belanden eronder, of een dropdown schuift achter de inhoud. Deze pagina behandelt die regel CSS en daarna elk van die problemen, met een live scrolldemo waarin u kunt wisselen tussen gewoon, krimpen en verbergen.
Scrol in het demovak. De header plakt aan dat vak, op dezelfde manier als een echte header aan de pagina plakt.
Zet de modus op krimpen of verbergen bij scrollen en scrol opnieuw in beide richtingen.
Klik in de demo op een sectielink om te zien hoe scroll-margin-top de kop vrij houdt van de header.
Kopieer de CSS en de hook die passen bij de modus die u wilt.
Doet sticky niets, zoek dan naar een voorouder met overflow: hidden, auto of scroll. De header plakt dan aan dat vak in plaats van aan de pagina.
Een sticky element kan zijn parent niet verlaten. Zet de header direct in body of in een wrapper die net zo hoog is als de pagina.
Geef de header een effen of licht doorschijnende achtergrond, anders schijnt de inhoud er tijdens het scrollen doorheen.
Stel scroll-padding-top op html in op de hoogte van de header, zodat elke ankerlink en elk element met focus eronder stopt.
Respecteer reduced motion: sla de schuifanimatie over voor mensen die om minder beweging hebben gevraagd.
Veelgestelde vragen
Waarom werkt mijn position: sticky niet?
Drie gebruikelijke oorzaken: geen inset-waarde zoals top: 0, een parent die direct na de header eindigt zodat er geen ruimte is om te plakken, of een voorouder met een andere overflow dan visible, die dan het vak wordt waaraan de header plakt. Controleer ze in die volgorde.
Moet een header sticky of fixed zijn?
Sticky is eenvoudiger omdat het zijn plaats in de layout behoudt, zodat er bovenaan de pagina niets onder verspringt. Fixed is handig als de header over een hero op volledig scherm moet liggen, maar dan voegt u zelf padding aan de pagina toe.
Hoe voorkom ik dat ankerlinks onder een sticky header verdwijnen?
Voeg scroll-padding-top toe aan de scrollende container, meestal html, gelijk aan de hoogte van de header. Voor losse doelen kunt u in plaats daarvan scroll-margin-top op de kop zelf zetten.
Waarom verschijnt mijn dropdown achter de pagina-inhoud?
Sticky positionering maakt een stacking context, dus alles in de header kan alleen binnen die context stapelen. Til de header zelf op met een z-index boven latere inhoud, bijvoorbeeld z-index: 50, in plaats van de dropdown op te tillen.
Hoe sticky echt werkt
Een sticky element begint in de normale flow. Zodra scrollen het voorbij de inset zou brengen, top: 0 voor een header, houdt het die positie vast totdat de onderkant van de parent eraan komt en het wegduwt.
Het vak waaraan het plakt is de dichtstbijzijnde voorouder met een scrollmechanisme, en daar hoort overflow: hidden ook bij. Daarom kan een wrapper die is toegevoegd om een carrousel af te knippen ongemerkt een header ver daarvandaan breken.
Verbergen bij omlaag scrollen, tonen bij omhoog scrollen
Vergelijk de huidige scrollpositie met de vorige. Omlaag bewegen voorbij een kleine drempel verbergt de header met transform: translateY(-100%); elke beweging omhoog brengt hem terug.
Animeer transform in plaats van top of height, want een transform veroorzaakt geen layoutberekening. Luister naar scroll met de passive-optie, zodat de browser nooit op uw handler wacht.
Krimpen zonder layoutsprongen
De hoogte van de header wijzigen terwijl hij sticky is, verschuift de inhoud eronder. Houd de buitenste hoogte vast en verklein het logo met transform: scale, of verminder de padding binnen een header die al uit de weg is.
Een data-attribuut zoals data-scrolled op de header houdt de stijlregels in de CSS en het script beperkt tot één regel.
De basis sticky header
Sticky header in een scrollende pagina
Scrol in het frame. De header blijft bovenaan en de ankerlink stopt eronder dankzij scroll-padding-top.
Verbergen bij omlaag scrollen, tonen bij omhoog scrollen
CSS voor de verborgen en verkleinde toestand
Het script zet alleen data-attributen. Elke visuele wijziging staat in de CSS.
React-hook: useHideOnScroll
Geeft twee booleans terug die u als data-attributen op de header kunt spreiden. De drempel van 8px negeert kleine schokjes.
Valkuilen bij sticky headers
Symptomen en oplossingen
Symptoom
Oorzaak
Oplossing
Header scrolt weg
Geen top-waarde
Voeg top: 0 toe
Header scrolt weg
Voorouder heeft overflow: hidden
Verplaats overflow naar een kleinere wrapper, of gebruik overflow: clip
Plakt, maar verdwijnt te vroeg
Parent is kort
Zet de header in body of in een wrapper met volledige hoogte
Ankerkoppen verborgen
Geen scrolloffset
scroll-padding-top op html
Menu valt achter de inhoud
Stacking context van de header te laag
z-index op de header zelf
Inhoud schijnt erdoorheen
Transparante achtergrond
Geef de header een achtergrondkleur
Gewoon sticky
Krimpen
Verbergen bij scrollen
Introductie
Functies
Prijzen
Contact
Live scrolldemo
Wissel tussen gewoon, krimpen en verbergen bij scrollen, en scrol dan in het vak.
Headermodus
Scrollbare demopagina
Merk
Scrol omlaag en daarna een klein stukje terug omhoog.