Maak een automatisch aanlokkelijke kleverige kop met Headroom.js

Kopteksten automatisch verbergen zijn al geruime tijd gestaag populair in webdesign. Veel blogs en online magazines gebruiken de sticky header om houdt gebruikers bezig en geef ze directe toegang tot de navigatie.

Medium heeft deze functie opnieuw gedefinieerd met een basisconcept dat verbergt de navigatie terwijl naar beneden scrollen maar laat het zien terwijl omhoog scrollen. Dit concept is een geworden razend populaire trend en nu kun je het gemakkelijk repliceer het gebruik makend van Headroom.js.

Headroom.js is een gratis vanille JavaScript-bibliotheek zonder afhankelijkheden of overmatige API-functies. U voegt het gewoon toe aan uw HTML, target de paginakop en laat het uitvoeren.

Hoofdruimte eenvoudig voegt bepaalde CSS-klassen toe die worden geanimeerd en verwijdert deze om te toon / verberg de header JavaScript gebruiken om de beweging te detecteren.

U zou deze functionaliteit zelf kunnen maken, maar waarom zou u zich zorgen maken? Headroom is getest en ondersteunt alle belangrijke browsers. Het zelfs speelt leuk met jQuery of Zepto als u al een JS-bibliotheek op uw site hebt geïnstalleerd.

U zult vinden veel codevoorbeelden in de GitHub repo maar hier is a eenvoudig voorbeeld die het doelwit is #header element:

 var myElement = document.querySelector ("# header"); // maak een Headroom-object door in het #header-element var headroom = new Headroom (myElement); // initialiseer de bibliotheek headroom.init (); 

De in het() functie heeft veel opties om aan te passen. U kunt de verschillende aanpassen element klassen, samen met verschillende call-call voor gebeurtenissen waar je kan embed uw eigen functies. Als u bijvoorbeeld wilt dat het element vervaagt nadat het is losgemaakt, gebruikt u de onUnpin Bel terug.

Deze opties zijn allemaal vermeld op de hoofdplugin-pagina, dus ga eens kijken en zie wat je denkt. Als je wilt zien Stahoogte in actie Kijk eens naar de pen hieronder die een bevat volledige kloon van de belangrijkste demopagina.