Teknik CSS Fix Header / Header yang diam di tempat adalah salah satu teknik CSS yang cukup asik dan mudah untuk dipelajari lho. Teknik ini diterapkan di banyak website yang cukup terkenal seperti Facebook, dan website saya sendiri.. Wkwkw
Langsung ke tutorialnya aja ya, kali ini saya akan membagikan langkah-langkah + demo supaya kita bisa memahami konsep cara kerjanya.. Pertama-tama kita buat struktur HTMLnya dulu, misalkan website kita terdiri dari header, content, dan footer seperti berikut ini
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layout Fix Header</title>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<div id="header">
<a href="" class="title">Judul Website</a>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, obcaecati, tempora, suscipit atque iure omnis reprehenderit rerum ab dolorum minima molestias ex cum quibusdam dolore corporis perferendis molestiae ullam facere. Illum, at, doloremque quas tempora cupiditate consectetur ut delectus laboriosam ipsam cumque tenetur quia dolores nesciunt est reiciendis voluptate veniam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, obcaecati, tempora, suscipit atque iure omnis reprehenderit rerum ab dolorum minima molestias ex cum quibusdam dolore corporis perferendis molestiae ullam facere. Illum, at, doloremque quas tempora cupiditate consectetur ut delectus laboriosam ipsam cumque tenetur quia dolores nesciunt est reiciendis voluptate veniam?</p>
</div>
<div id="footer">
Copyright 2017
</div>
</body>
</html>
/*LAYOUT SECTION*/
#header{
width:100%;
background:#252525;
}
#content{
position:relative;
background:#eee;
margin:0px 20px;
}
#footer{
position:relative;
background:#000;
height:40px;
line-height:40px;
color:#fff;
text-align:center;
}
/*CONTENT SECTION*/
a.title{
color:#f0f0f0;
font-weight:bold;
text-decoration:none;
font-size:30px;
line-height:60px;
padding:20px;
}
p{
padding:.5em 1em;
font-size:20px;
text-align:justify;
}
Sampai di struktur dasar ini, tampilannya kira-kira seperti ini :
Terlihat baik-baik saja ya? Memang, tapi bagaimana kalau bagian kontennya kita isi lebih banyak lagi dari yang sekarang? Yang terjadi adalah, ketika browser discroll maka header akan menghilang karena tertutup viewport.
Header yang tersembunyi dari viewport biasanya akan cukup menyulitkan dari sisi navigasi. Misalnya ketika pengguna website sudah scroll sampai kebawah dan ingin mengakses header, artinya user harus scroll ke atas lagi dong. Nah, untuk mengatasi itulah teknik Fix Header digunakan.
Cara pengaplikasiannya adalah dengan menggunakan position:fixed pada container header yang ingin dibuat diam. Position Fixed harus disertai lebar (width) dan tinggi (height) yang jelas agar dapat tampil dengan baik. Selain itu juga perlu ditambahkan perintah z-index untuk mengatur posisi header agar selalu muncul tanpa tertutup elemen apapun. Ah, dan jangan lupa juga padding-top untuk div content, agar tidak ada bagian konten yang tersembuyi karena tertutup header.
#header{
width:100%;
background:#252525;
position:fixed; /*trik posisi fix*/
z-index:9999; /*supaya header selalu muncul di atas seluruh elemen*/
}
...
...
#content{
...
...
...
padding-top:70px;
/*tambahkan padding top yang sedikit lebih besar dari tinggi header, supaya tidak ada bagian yang tertutup header. besarannya dikira-kira saja */
}
Setelah melakukan perubahan-perubahan tersebut, jadi deh layout fix headernya.. Kalau kita scroll websitenya sampai kebawah, maka header masih diam diatas seperti ini..
Demikian tutorial Fix Header dengan CSS.. Semoga bisa dipraktekkan ya..
File demo tutorial ini bisa didownload cuma-cuma disini. Selamat mencoba~
