Inloggen Account aanvragen

Sticky header

Snel naar het hoofdmenu. Op lange pagina's met veel content kan het met name op mobiel tijdrovend zijn om na het lezen terug te moeten scrollen naar het hoofdmenu bovenaan de pagina. Met een sticky header of een back-to-top button blijft het hoofdmenu binnen handbereik.

Sticky header op desktop

homepage met tabnavigatie

Op desktop kan tabnavigatie als sticky header ingezet worden wanneer het nodig is deze altijd te kunnen benaderen, bijvoorbeeld bij langere pagina's.

Homepage met sticky header

Bij het naar beneden scrollen verdwijnt de witte logobalk uit zicht maar blijft de gekleurde navigatiebalk staan.

Sticky header op mobiel

mobiele weergave met logo en navigatiebalk

Op mobiel zien we aan het begin van elke webpagnina de witte logobalk met daaronder een gekleurde balk met navigatie-onderdelen. In dit voorbeeld zien we aan de linkerkant het homepage-icoon en de websitetitel 'Natura 2000' en aan de rechterkant het zoek-icoon en het hamburger-menu-icoon. 

mobiele weergave met gefixeerde navigatiebalk zonder logo

Bij het naar beneden scrollen verdwijnen logo en navigiatiebalk uit zicht. Wanneer je halverwege de pagina terugscrollt verschijnt de sticky header (donkergroene navigatiebalk) gefixeerd aan de bovenkant. Zo blijven de navigatieonderdelen bij terug scrollen altijd binnen handbereik.

mobiele weergave met hamburgermenu opengeklikt

Vanuit elke positie op de pagina is de de sticky header te benaderen om naar een andere pagina te kunnen navigeren. Je hebt in dit geval de keuze uit: navigeren naar de home-pagina van 'Natura 2000', een zoekopdracht uitvoeren of de hoofdnavigatie onder het (hamburger)menu raadplegen.

Back-to-top button op mobiel

Een andere oplossing voor lange pagina's met veel content is de back-to-top button. Deze verschijnt nadat pakweg 4 schermen aan content naar beneden is gescrollt, rechts onderin het beeldscherm. Met 1 klik kan worden teruggekeerd naar het hoofdmenu aan het begin van de pagina. De button blijft zichtbaar totdat de footer onderin de pagina is bereikt.