Membuat Header Website Fixed Tidak Bergerak Saat di Scroll

Dalam beberapa website menu fixed sering terlihat sekali dipakai, ciri dari header ini biasanya bisa dilihat dari menu/head yang tetap berada diatas saat di scroll, jadi nanti content websitenya scroll namun bagian menu/headernya tetap diam, mungkin bisa dibilang seperti sticky menu, tapi disini tidak melibatkan jquery seperti pada artikel Cara Membuat Menu Blog Sticky Ketika di Scroll

Disini Saya akan sedikit memberikan gambaran atau contoh untuk membuat menu tersebut, disini Saya akan membaginya kedalam 3 bagian yaitu Header, Content dan Footer

Berikut ini adalah langkah – langkah Membuat Menu Website Fixed Tidak Bergerak Saat di Scroll

Buat dulu kerangka HTMLnya


<html>
<head>
<title>Membuat Layout Fixed Header</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="wrapper">
    <div id="header">
        <a href="" class="title">KEPALA WEBSITE</a>
    </div>
    <div id="content">
 
    </div>
    <div id="footer">
    <a href="" class="title">Footer Copyright</a>
    </div>
</div>
</body>
</html>

Selanjutnya buat susunan CSSnya seperti berikut simpan dengan nama style.css

*{
margin:0px auto; /*supaya layer otomatis mengisi dan ke tengah*/
}
body{font-family:calibri, verdana, sans-serif;}
 
#wrapper{
width:100%;
}
 
#header{
width:100%; /*mengatur header supaya full width*/
z-index:1000; 
position:fixed;
height:60px; 
background:#FF0000
}
#header a.title{
color:#ffffff; 
font-weight:bold; 
text-decoration:none; 
font-size:30px; 
line-height:60px; 
padding:0px 20px; /*mengatur jarak antara di kiri dan kanan saja*/
}
 
#content{
position:relative;
background:#eee;
min-height:1500px; /*tujuannya supaya konten terlihat berisi. Kalau sudah diisi teks, baris ini harus dihapus.*/
margin:0px 20px;
}
 
#footer{
position:relative;
background:#FF0000;
height:40px;
}
#footer a.title
{
color:#ffffff; 
text-decoration:none; 
font-size:30px; 
line-height:40px; 
float:right;
padding:0px 20px;
}

Terakhir simpan semua file diatas dalam satu folder

Hasil akhir dari pekerjaan diatas nanti kurang lebih akan terlihat seperti pada gambar dibawah ini

Tampilan header sebelum di scroll

Tampilan header setelah di scroll

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple