Luo automaattinen piilotus-otsikko Headroom.js n avulla

Automaattisesti piilottavat otsikot ovat olleet jatkuvasti suosittuja web-suunnittelussa jo jonkin aikaa. Monet blogit ja online-lehdet käyttävät tahmeaa otsikkoa pitää käyttäjiä mukana ja antaa heille suoran pääsyn navigointiin.

Medium on määritteli tämän ominaisuuden uudelleen perusperiaatteella piilottaa navigoinnin sillä aikaa vieritys alas mutta näyttää sen sillä aikaa vieritys ylöspäin. Tämä käsite on tullut a hurjasti suosittu trendi ja nyt voit helposti replikoi sitä käyttämällä Headroom.js.

Headroom.js on a vapaa vanilja-JavaScript-kirjasto ilman riippuvuuksia tai liiallisia API-ominaisuuksia. Lisää vain HTML-koodiin, kohdista sivun otsikko ja anna sen ajaa.

Yksinkertaisesti lisää ja poistaa tietyt CSS-luokat, jotka animoivat jotta näytä / piilota otsikko JavaScriptin avulla havaitaan liike.

Voit tehdä tämän toiminnon itse, mutta miksi vaivautua? Korkeus on testattu ja tukee kaikkia tärkeimpiä selaimia. Se on jopa pelaa hienosti jQueryn tai Zepon kanssa jos sinulla on jo JS-kirjasto asennettuna sivustoosi.

Tulet löytämään paljon koodinäytteitä GitHub-repossa, mutta tässä on a yksinkertainen esimerkki joka kohdistuu #header elementti:

 var myElement = document.querySelector ("# otsikko"); // luo #header-elementin var headroom = new Headroom (myElement) kautta kulkeva Headroom-objekti; // alustaa kirjaston headroom.init (); 

sen sisällä() toiminto on paljon vaihtoehtoja muokata. Voit muokata erilaisia elementtien luokat, yhdessä eri tapahtuman laukaiseminen missä voit upota omat toiminnot. Jos esimerkiksi haluat, että elementti haalistuu sen jälkeen, kun se on poistettu, käytät sitä onUnpin soita takaisin.

Nämä vaihtoehdot ovat kaikki lueteltu pääosan laajennussivulla, joten tarkista se ja katso, mitä mieltä olet. Jos haluat nähdä Pään korkeus toiminnassa katso alla olevaa kynää, joka sisältää a demon sivun koko klooni.