Δημιουργήστε μια αυτοκόλλητη κολλητική κεφαλίδα με Headroom.js

Αυτόματη απόκρυψη κεφαλίδων έχουν γίνει σταθερά δημοφιλείς στο σχεδιασμό ιστοσελίδων για αρκετό καιρό. Πολλά ιστολόγια και ηλεκτρονικά περιοδικά χρησιμοποιούν την κολλώδη κεφαλίδα σε κρατήστε τους χρήστες εμπλεκόμενους και να τους δώσετε άμεση πρόσβαση στην πλοήγηση.

Το μέσο έχει επαναπροσδιόρισε αυτό το χαρακτηριστικό με μια βασική έννοια που κρύβει την πλοήγηση ενώ με κύλιση προς τα κάτω αλλά το δείχνει ενώ κύλιση προς τα επάνω. Αυτή η έννοια έχει γίνει α άγρια ​​δημοφιλή τάση και τώρα μπορείτε εύκολα να το αντιγράψετε χρησιμοποιώντας Headroom.js.

Το Headroom.js είναι α δωρεάν βιβλιοθήκη JavaScript vanilla χωρίς εξαρτήσεις ή υπερβολικές δυνατότητες API. Μόλις το προσθέσετε στην HTML σας, στοχεύστε την κεφαλίδα της σελίδας και αφήστε την να τρέξει.

Απλά το κεφάλι προσθέτει και αφαιρεί ορισμένες κλάσεις CSS που ζωντανεύουν ώστε να Εμφάνιση / απόκρυψη της κεφαλίδας χρησιμοποιώντας JavaScript για την ανίχνευση της κίνησης.

Θα μπορούσατε να κάνετε αυτή τη λειτουργία μόνοι σας, αλλά γιατί να ενοχλείτε; Το headroom δοκιμάζεται και υποστηρίζει όλα τα μεγάλα προγράμματα περιήγησης. Ακόμα και παίζει ωραία με jQuery ή Zepto αν έχετε ήδη εγκατεστημένη μια βιβλιοθήκη JS στον ιστότοπό σας.

Θα βρεις πολλά δείγματα κώδικα στο GitHub repo αλλά εδώ είναι α απλό παράδειγμα που στοχεύει στην #επί κεφαλής στοιχείο:

 var myElement = document.querySelector ("# header"); // δημιουργήστε ένα αντικείμενο Headroom που διέρχεται στο στοιχείο #header var headroom = new Headroom (myElement); // αρχικοποίηση της βιβλιοθήκης headroom.init (); 

ο μέσα σε αυτό() έχει πολλές επιλογές για να προσαρμόσετε. Μπορείτε να προσαρμόσετε τα διαφορετικά κατηγοριών στοιχείων, μαζί με διαφορετικά ενεργοποίηση επανάκλησης συμβάντων όπου μπορείς ενσωματώστε τις δικές σας λειτουργίες. Για παράδειγμα, εάν θέλετε το στοιχείο να ξεθωριάζει μετά την αποσύνδεσή του, θα χρησιμοποιήσετε το onUnpin επανάκλησης.

Αυτές οι επιλογές είναι όλες που παρατίθενται στην κύρια σελίδα προσθήκης, οπότε ελέγξτε το και δείτε τι σκέφτεστε. Αν θέλετε να δείτε Υψος χώρου σε δράση ρίξτε μια ματιά στο στυλό κάτω από αυτό περιέχει ένα πλήρης κλώνος της κύριας σελίδας επίδειξης.