Izveidojiet Auto-Hiding Sticky Header ar Headroom.js

Automātiski slēpj galvenes jau sen ir pastāvīgi populāri web dizainā. Daudzi emuāri un tiešsaistes žurnāli izmanto uzlīmēto virsrakstu saglabāt lietotājus un dod viņiem tiešu piekļuvi navigācijai.

Medium ir šo funkciju ar pamatkoncepciju slēpj navigāciju kamēr ritinot uz leju bet parāda to kamēr ritinot uz augšu. Šī koncepcija ir kļuvusi par a ļoti populāra tendence un tagad jūs varat viegli to atkārtot izmantojot Headroom.js.

Headroom.js ir a bezmaksas vaniļas JavaScript bibliotēka bez atkarībām vai pārmērīgām API funkcijām. Jūs vienkārši pievienojat to savam HTML, atlasiet lapas galveni un ļaujiet tai darboties.

Vienkārši augstums pievieno un noņem dažas CSS klases, kas dzīvo lai rādīt / paslēpt galveni izmantojot JavaScript, lai noteiktu kustību.

Jūs varētu padarīt šo funkcionalitāti pats, bet kāpēc apnikt? Tests ir pārbaudīts un atbalsta visas galvenās pārlūkprogrammas. Tas pat spēlē jauki ar jQuery vai Zepto ja jūsu vietnē jau ir instalēta JS bibliotēka.

Jūs atradīsiet daudz koda paraugu GitHub repo, bet šeit ir a vienkāršs piemērs kas ir vērsts uz #header elements:

 var myElement = document.querySelector ("# galvene"); // izveido galvas objekta objektu, kas iet cauri #header elementam var headroom = new Headroom (myElement); // inicializēt bibliotēkas headroom.init (); 

The tajā() funkcija ir daudz iespēju pielāgot. Varat pielāgot dažādus elementu klases, kopā ar dažādiem notikums izraisa atzvanīšanu kur jūs varat iegult savas funkcijas. Piemēram, ja vēlaties, lai elements izbalētu pēc tam, kad tas ir neatjaunots, jūs to izmantotu uzspiest atzvani.

Šīs iespējas ir visas uzskaitīti galvenajā spraudņa lapā, lai to pārbaudītu un redzētu, ko jūs domājat. Ja vēlaties redzēt Dziļums darbībā aplūkojiet pildspalvveida pilnšļirci, kas satur a pilna galvenā demonstrācijas lapas klons.