Teknik yang efektif dan ampuh ini jauh lebih mudah dicapai daripada yang Anda duga.

Dalam desain web, header tempel adalah alat canggih yang meningkatkan pengalaman dan navigasi pengguna. Saat pengguna menggulir halaman web ke bawah, header tempel tetap terlihat, memastikan bahwa link navigasi penting selalu dapat diakses. Mari selidiki seluk-beluk membuat header tempel menggunakan CSS.

Apa yang Menggunakan Header Lengket?

Sticky header tetap berada di satu tempat pada halaman web, bahkan saat pengguna menggulir. Properti CSS tertentu, terutama posisi: lengket, akan membantu Anda mencapai perilaku ini. Beberapa manfaat memiliki header tempel mencakup pengalaman pengguna yang lebih baik dan navigasi situs web yang mudah.

  • Pengguna dapat dengan mudah mengakses tautan navigasi utama tanpa menggulir ke atas.
  • Logo atau nama merek tetap terlihat sehingga memperkuat identitas merek.
  • Header tempel dapat menghemat ruang dengan menghapus navigasi sidebar, sehingga memberikan lebih banyak ruang untuk konten.
instagram viewer

Mendesain Header: Struktur HTML

Fondasi dari setiap header tempel adalah struktur HTML-nya. Berikut cara membuat elemen HTML yang diperlukan untuk header tempel Anda.

<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>

Struktur ini menggunakan header yang berisi logo dan elemen nav dengan daftar tautan navigasi yang tidak berurutan. Kemudian menggunakan tag utama dan beberapa tag bagian untuk mewakili setiap bagian pada halaman. Saat ini, halamannya terlihat seperti ini:

Meletakkan Dasar Dengan CSS

Kode CSS di bawah ini menggunakan properti model kotak seperti padding, margin, dan flexbox untuk menciptakan desain yang menarik, dengan tinggi untuk setiap bagian 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;
}

Halamannya sekarang akan terlihat seperti ini:

Menerapkan Efek Lengket: CSS

Saat ini, saat Anda menggulir halaman ke bawah, Anda akan melihat bahwa header berpindah dari layar. Untuk memperbaikinya, gunakan properti posisi CSS dan atur header menjadi lengket.

Properti ini berperilaku seperti kombinasi posisi relatif dan tetap, bergantung pada posisi gulir pengguna.

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

Menyetel tajuk menjadi lengket memastikan tajuk tetap menempel pada posisi di halaman, apa pun penggulirannya. Properti top menentukan di mana header harus ditempatkan pada halaman. Sekarang, menggulir ke bawah halaman menghasilkan:

Mengatasi Potensi Masalah Penumpukan

Terkadang, elemen lain di halaman mungkin tumpang tindih dengan header tempel. Untuk memastikan header tetap berada di atas, Anda dapat menambahkan properti z-index:

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

Terakhir, tambahkan properti pengguliran halus ke elemen HTML untuk pengalaman pengguna yang lebih baik:

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

Halaman tersebut sekarang akan bergulir dengan lancar antar bagian:

Meningkatkan Navigasi Web Dengan CSS Sticky Header

Menambahkan header tempel ke desain situs web Anda dapat meningkatkan pengalaman pengguna secara signifikan. Fitur ini membuat pengguna tetap terhubung ke menu utama, mempertahankan merek yang konsisten, dan memberikan tampilan modern pada situs web Anda.

Dengan kekuatan CSS, menciptakan efek ini sangatlah mudah dan efektif. Tren desain web berubah seiring waktu, tetapi sticky header selalu berguna untuk industri yang berbeda.