Αυτή η αποτελεσματική και ισχυρή τεχνική είναι πολύ πιο εύκολο να επιτευχθεί από ό, τι θα περίμενε κανείς.

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

Τι χρήση μιας κολλητικής κεφαλίδας;

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

  • Οι χρήστες μπορούν εύκολα να έχουν πρόσβαση στους κύριους συνδέσμους πλοήγησης χωρίς να κάνουν κύλιση στην κορυφή.
  • Το λογότυπο ή το εμπορικό σήμα παραμένει ορατό, ενισχύοντας την ταυτότητα της επωνυμίας.
    • instagram viewer
  • Μια κολλώδης κεφαλίδα μπορεί να εξοικονομήσει χώρο καταργώντας την πλοήγηση στην πλαϊνή γραμμή, αφήνοντας περισσότερο χώρο για περιεχόμενο.

Σχεδιασμός της Κεφαλίδας: Δομή HTML

Το θεμέλιο κάθε κολλώδους κεφαλίδας είναι η δομή HTML της. Δείτε πώς μπορείτε να δημιουργήσετε τα απαραίτητα στοιχεία HTML για την κολλώδη κεφαλίδα σας.

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

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

Βάζοντας τη βάση με το CSS

Ο παρακάτω κώδικας CSS χρησιμοποιεί ιδιότητες μοντέλου κουτιού όπως padding, margin και flexbox για να δημιουργήσετε ένα ελκυστικό σχέδιο, με ύψος για κάθε τμήμα placeholder.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


main,
section { height: 100vh; }


.logo { font-size: 3rem; }


main,
header,
section {
display: flex;
align-items: center;
}


main { justify-content: center; }


header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb; 
}


navul {
display: flex;
column-gap: 2rem;
list-style: none;
}


a {
text-decoration: none;
font-size: 2rem;
color: #333;
}


section { justify-content: center; }


#home { background: #2c3e50; }


#about { background: #ccccff; }


#services { background: #f5b7b1; }


#contact { background: #40e0d0; }


h1 {
 font-size: 4rem;
 color: #fff;
}

Η σελίδα θα πρέπει τώρα να μοιάζει με αυτό:

Εφαρμογή του Sticky Effect: CSS

Επί του παρόντος, όταν κάνετε κύλιση προς τα κάτω στη σελίδα, θα παρατηρήσετε ότι η κεφαλίδα μετακινείται από την οθόνη. Για να το διορθώσετε, χρησιμοποιήστε την ιδιότητα θέσης CSS και ορίστε την κεφαλίδα σε sticky.

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

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

Η ρύθμιση της κεφαλίδας σε sticky διασφαλίζει ότι θα κολλήσει σε μια θέση στη σελίδα ανεξάρτητα από την κύλιση. Η επάνω ιδιότητα καθορίζει πού στη σελίδα πρέπει να τοποθετηθεί η κεφαλίδα. Τώρα, κάνοντας κύλιση προς τα κάτω στη σελίδα προκύπτει:

Αντιμετώπιση πιθανών ζητημάτων στοίβαξης

Μερικές φορές, άλλα στοιχεία στη σελίδα μπορεί να επικαλύπτονται με την κολλώδη κεφαλίδα. Για να διασφαλίσετε ότι η κεφαλίδα παραμένει στην κορυφή, μπορείτε να προσθέσετε την ιδιότητα z-index:

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

Τέλος, προσθέστε την ιδιότητα ομαλής κύλισης στο στοιχείο HTML για μια καλύτερη εμπειρία χρήστη:

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

Η σελίδα θα πρέπει τώρα να μετακινείται ομαλά μεταξύ των ενοτήτων:

Αύξηση της πλοήγησης στον Ιστό με κολλώδεις κεφαλίδες CSS

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

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