Τι κάνει το position sticky;
Τι κάνει το position sticky;

Βίντεο: Τι κάνει το position sticky;

Βίντεο: Τι κάνει το position sticky;
Βίντεο: Eτοιμάζονταςτην πρώτη σας HTML σελίδα! μέρος 6 - Position sticky, fixed, absolute & css transitions 2024, Δεκέμβριος
Anonim

Ένα στοιχείο με θέση : κολλώδης ; τοποθετείται με βάση την κύλιση του χρήστη θέση . ΕΝΑ κολλώδης Το στοιχείο εναλλάσσεται μεταξύ σχετικού και σταθερού, ανάλογα με την κύλιση θέση . Τοποθετείται σε σχέση μέχρι μια δεδομένη μετατόπιση θέση συναντάται στο παράθυρο προβολής - μετά "κολλάει" στη θέση του (όπως θέση :σταθερός).

Ομοίως, πώς μπορώ να κάνω τη θέση μου κολλώδη;

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

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

Σε σχέση με αυτό, μπορώ να χρησιμοποιήσω τη θέση CSS sticky;

CSS

θέση : κολλώδης

υποστηρίζεται σε Firefox, Safari και Chrome Canary (56+). Θέση CSS : κολλώδης υποστηρίζεται σε Firefox, Safari και Chrome Canary (56+).

Τι είναι το Webkit sticky;

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

Συνιστάται: