Sukurkite „Auto-Hiding Sticky Header“ su „Headroom.js“

Automatiškai slėpti antraštes jau seniai populiarėja žiniatinklio dizaine. Daugelis dienoraščių ir internetinių žurnalų naudoja lipduką saugoti naudotojus ir suteikti jiems tiesioginę prieigą prie navigacijos.

Vidutinis yra iš naujo apibrėžė šią funkciją su pagrindine koncepcija slepia navigaciją kol slinkite žemyn bet rodo jį kol slinkti aukštyn. Ši koncepcija tapo a labai populiari tendencija ir dabar jūs galite lengvai pakartokite naudojant Headroom.js.

Headroom.js yra a nemokama vanilės „JavaScript“ biblioteka be jokių priklausomybių ar pernelyg didelių API funkcijų. Tiesiog pridėkite jį prie savo HTML, nukreipkite puslapio antraštę ir palaukite.

Tiesiog patalpa prideda ir pašalina tam tikras CSS klases, kurios animuojamos siekiant rodyti / slėpti antraštę naudojant „JavaScript“, kad aptiktų judesį.

Jūs galite padaryti šią funkciją sau, bet kodėl nerimauti? Išbandytas galvos aukštis ir palaiko visas pagrindines naršykles. Tai netgi groja maloniai su jQuery arba Zepto jei jūsų svetainėje jau įdiegta JS biblioteka.

Rasite daug kodų pavyzdžių „GitHub“ repo, bet čia yra a paprastas pavyzdys kuri skirta #header elementas:

 var myElement = document.querySelector ("# header"); // sukurti „Headroom“ objektą, einantį #header elemente var headroom = new Headroom (myElement); // inicijuoti bibliotekos headroom.init (); 

The init () funkcija daug galimybių tinkinti. Galite pritaikyti skirtingus elementų klasės, kartu su skirtingais įvykis sukelia atšaukimus kur galite įdėkite savo funkcijas. Pvz., Jei norite, kad elementas išnyks po to, kai jis nebus atkurtas, naudosite antUnpin perskambink.

Visos šios parinktys išvardyti pagrindiniame papildinio puslapyje, taip patikrinkite ir pažiūrėkite, ką manote. Jei norite pamatyti Veikimo aukštis pažvelkite žemiau esančią švirkštimo priemonę, kurioje yra a visas pagrindinio demonstracinio puslapio klonas.