Membuat Header Website Fixed Tidak Bergerak Ketika Di Scroll

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

Disini Saya akan sedikit mempersembahkan citra atau teladan untuk membuat hidangan tersebut, disini Saya akan membaginya kedalam 3 bab yaitu Header, Content dan Footer

Berikut ini yaitu 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 menyerupai diberikut 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 semoga 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 semoga konten terlihat mencakup. 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; }