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
  1. 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>
    
  2. 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;
    }
    

  3. 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 sebelum di scroll

tampilan header setelah di scroll
Tampilan header setelah di scroll

2 Responses to "Membuat Header Website Fixed Tidak Bergerak Saat di Scroll"

  1. Gambarnya tidak muncul di browser saya kang...

    ReplyDelete
  2. nggak bergerak gimana maksudnya kaya sycki gituh ya mang?
    saya teh dari dulu bisa menstycki in header...gituh bukan maksudnyah?

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...