Πώς να δημιουργήσετε: Στατική κεφαλίδα κατά τη διάρκεια της κύλισης

Μάθετε πώς να δημιουργήσετε στατική/σταντική κεφαλίδα κατά τη διάρκεια της κύλισης χρησιμοποιώντας CSS και JavaScript.

Προσπαθήστε να το δοκιμάσετε προσωπικά

Δημιουργία στατικής κεφαλίδας κατά τη διάρκεια της κύλισης

Πρώτη βήμα - Προσθέστε HTML:

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

Δεύτερη βήμα - Προσθέστε CSS:

Ρύθμιση του στυλ της κεφαλίδας της σελίδας; Προσθέστε position: sticky και top: 0, ώστε η κεφαλίδα της σελίδας να παραμένει στατική όταν κινείται στην κορυφή. 
.header {
  position: sticky;
  cima: 0;
  πληρωματικότητα: 10px 16px;
  βάθος χρώματος: #555;
  χρώμα: #f1f1f1;
}

Προσπαθήστε να το δοκιμάσετε προσωπικά

Το στοιχείο στοιχείου ορίζεται position: sticky; Μετά από αυτό, η θέση του θα καθοριστεί από τη θέση κύλισης του χρήστη.

Η στάσιμη στοιχείο θα περάσει από τη σχετική τοποθέτηση και τη στατική τοποθέτηση ανάλογα με τη θέση της κύλισης. Πριν φτάσει στη δεδομένη απομακρυσμένη θέση στον οπτικό τομέα, διατηρεί τη σχετική τοποθέτηση; Αφού φτάσει, θα "κολληθεί" στην τοποθεσία αυτή (όπως position: fixed ίδια).

Σημείωση:Για να ενεργοποιηθεί η στάσιμη τοποθέτηση, πρέπει να καθορίσετε τουλάχιστον cima、δεξιά、κάτω ή αριστερά 中的一个。

Σχετικές σελίδες

Οδηγός:CSS position