15 jQuery προσθήκες για να κάνετε έξυπνα στοιχεία

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

Ονομάζεται ένα κολλώδες στοιχείο, αυτό μπορεί να επιτευχθεί μόνο με τη χρήση του CSS, ωστόσο, χρησιμοποιώντας αυτή τη μέθοδο, το αποτέλεσμα δεν είναι αξιόπιστο σε πολλά προγράμματα περιήγησης. Αυτός είναι ο λόγος που έχουμε συγκεντρώσει μια χούφτα JS βιβλιοθήκες και jQuery plugins που θα σας επιτρέψει να επιτύχετε αυτό το συγκεκριμένο σχέδιο UX με ελάχιστη ή καμία ταλαιπωρία.

1. Waypoints

Τα Waypoints είναι μια βιβλιοθήκη για την εκτέλεση μιας συνάρτησης βασισμένης στη θέση του στοιχείου στο παράθυρο προβολής. Έρχεται με μια λειτουργία συντόμευσης που κάνει αυτό το στοιχείο “κολλώδης”. Μπορείτε να προσαρμόσετε την κατεύθυνση κύλισης - πάνω, κάτω, και ακόμα σωστά και αριστερά - ως προς το ποιο στοιχείο πρέπει να κολλήσει μέσα στο παράθυρο προβολής.

• Εξάρτηση: Κανένα / jQuery (προαιρετικό)
• Αδεια: Άδεια MIT

2. Sticky Kit

Με StickyKit, όχι μόνο μπορείτε να κάνετε ένα στοιχείο ραβδί μέσα στο παράθυρο προβολής, αλλά μπορείτε επίσης να κάνετε να κολλήσουν μέσα στο γονικό στοιχείο που ορίζετε σε πολλαπλά στοιχεία ταυτόχρονα. Το plugin έρχεται επίσης με μερικές προηγμένες ρυθμίσεις, συμπεριλαμβανομένων προσαρμοσμένων συμβάντων και ενεργοποιήσεων.

• Εξάρτηση: jQuery
• Αδεια: WTFPL

3. StickyJS

StickyJS είναι ένα εύκολο στη χρήση jQuery κολλώδες plugin που κάνει αυτό που λέει. Το plugin λειτουργεί έξω από το κουτί. Ωστόσο, εάν χρειάζεστε κάποια προσαρμογή, έρχεται με επιλογές / ρυθμίσεις, προσαρμοσμένες μεθόδους και συμβάντα.

• Εξάρτηση: jQuery
• Αδεια: Άδεια MIT

4. HeadRoom

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

• Εξάρτηση: Κανένα / jQuery (προαιρετικό) / Γωνιακό (προαιρετικό)
• Αδεια: Άδεια MIT

5. MakefixedJS

Makefixed σας επιτρέπει να κάνετε τα στοιχεία να καθορίζονται δυναμικά καθώς οι χρήστες μετακινούνται στη σελίδα. Απλά καλέστε το makeFixed () λειτουργία στο στοιχείο που θέλετε να καθορίσετε. Ελέγξτε το demo για να το δείτε στη δράση.

• Εξάρτηση: jQuery
• Αδεια: GPL

6. MidnightJS

Μεσάνυχτα σας επιτρέπει να κολλήσετε πολλαπλές κεφαλίδες / στοιχεία και να εναλλάσσετε μεταξύ τους με βάση τη θέση τους μέσα στο έγγραφο (δέντρο DOM), δείτε το demo για να δείτε τι εννοώ. Επιπλέον, μπορείτε να αλλάξετε το χρώμα τους με την απλή προσθήκη δεδομένα-μεσάνυχτα με το καθορισμένο όνομα χρώματος.

• Εξάρτηση: jQuery
• Αδεια: Άδεια MIT

7. ScrollMagic

ScrollMagic έχει προηγμένες λειτουργίες για να προσθέσει αλληλεπίδραση, κατά τη διάρκεια μιας σελίδας κύλισης. Μπορείτε να καρφιτσώσετε στοιχεία από συγκεκριμένες θέσεις κύλισης, να προσθέσετε κινούμενα σχέδια με βάση τη θέση κύλισης ή ακόμα και να κάνετε ένα θαυμάσιο αποτέλεσμα παράλλαξης. Το demo σας δίνει μερικές ιδέες για το τι μπορεί να κάνει αυτό το plugin.

• Εξάρτηση: jQuery / Velocity.js
• Αδεια: Διπλή Άδεια Χρήσης (MIT και GPL)

8. onScreen

στην οθόνη είναι παρόμοιο με Waypoints - σας επιτρέπει να εκτελέσετε λειτουργίες καθώς το στοιχείο εισέρχεται, φεύγει ή φτάνει σε συγκεκριμένες θέσεις μέσα στο παράθυρο προβολής του προγράμματος περιήγησης.

• Εξάρτηση: jQuery
• Αδεια: Άδεια MIT

9. Καρφίτσα jQuery

jQuery Pin είναι ένα μικρό plugin jQuery “καρφίτσα” ή “ξεκαρφιτσώνω” σε μια θέση, όταν μετακινηθείτε στη σελίδα. Το πιο αγαπημένο μέρος αυτού του plugin είναι η επιλογή να την απενεργοποιήσετε σε ορισμένα πλάτη προβολής.

• Εξάρτηση: jQuery
• Αδεια: Άδεια BSD

10. Sticky Float

Sticky Float μας επιτρέπει να δώσουμε στα στοιχεία μια σταθερή θέση που είναι σχετική με τη μητρική της. Μπορείτε να ρυθμίσετε την κολλώδη επιλογή ανάλογα με τις ανάγκες σας με τις παρεχόμενες παραμέτρους και με την αλλαγή της τιμής. Πιάσε το demo εδώ.

• Εξάρτηση: jQuery
• Αδεια: Απροσδιόριστος

11. Ζεύγος Zebra

Ζεύγος Zebra είναι ένα ελαφρύ plugin για να κάνει οποιοδήποτε στοιχείο καρφίτσα στο δοχείο τους. Με αυτό το plugin μπορείτε να προσθέσετε “κολλώδες” σε στοιχεία του έργου σας, όπως στην πλοήγηση, τις πλευρικές γραμμές, τις κεφαλίδες και τα υποσέλιδα ή άλλα στοιχεία που θέλετε να διατηρούνται ορατά όταν οι χρήστες μετακινηθούν προς τα κάτω. Δείτε το demo.

• Εξάρτηση: jQuery
• Αδεια: Άδεια GPL

12. HC-Sticky

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

• Εξάρτηση: jQuery
• Αδεια: Άδεια MIT

13. Sticky Mojo

Sticky Mojo είναι ένα ελαφρύ, γρήγορο και εύκαμπτο plugin jQuery για να δημιουργήσετε φοβερά κολλώδη στοιχεία. Είναι συμβατό με τα σύγχρονα προγράμματα περιήγησης και θα υποβαθμιστεί με χαρά στο IE.

• Εξάρτηση: jQuery
• Αδεια: Άδεια MIT

14. Κολλώδης Navbar

Αν θέλετε να κάνετε πλοήγηση μιας σελίδας που να κολλάει όταν κάποιος μετακινηθεί προς τα κάτω, αυτή η βιβλιοθήκη είναι για εσάς.Σημαντικό Navbar θα τοποθετήσετε την πλοήγηση στην κορυφή του παραθύρου του προγράμματος περιήγησης και θα επισημάνετε τη σύνδεση αγκύρωσης για να συνδεθείτε στην αντίστοιχη ενότητα της σελίδας σας. Μπορείτε επίσης να προσθέσετε το Animate.css για να ομορφύνετε το εφέ πλοήγησης.

• Εξάρτηση: jQuery
• Αδεια: Άδεια MIT

15. StickyStack

StickyStack θα κάνουν τα στοιχεία να στοιβάζονται με ένα άλλο όταν οι χρήστες μετακινηθούν στο στοιχείο και φτάσουν στο επάνω μέρος του παραθύρου προβολής. Με αυτή τη βιβλιοθήκη, η μακρά σελίδα σας θα μετατραπεί σε στοίβα χαρτιά.

• Εξάρτηση: jQuery
• Αδεια: Απροσδιόριστος