Halo gan kembali lagi bersama ane di zocoding, kali ini ane mau berbagi tutorial tentang cara membuat header diam di tempat dengan menggunakan css position fixed. Hmm sebenarnya apa sih itu position fixed? Position fixed adalah sebuah property css yang berfungsi untuk menampilkan konten secara fixed (Tetap diam/mengikuti layar jika di Scroll) dengan adanya fitur ini maka tentu kita bisa menaruh sebuah menu yang bisa ditampilkan secara fixed tanpa perlu scroll ke atas lagi.
Untuk membuatnya Hal pertama yang harus anda lakukan yaitu membuat halaman baru di web, blog atau wap anda dan tulislah code css yang ane gabungin dengan tag html dibawah ini, Eitzzz jangan lupa dibawahnya harus ada konten semisal artikel atau apalah yang penting bisa di scroll agar kita bisa tahu hasilnya.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
body
{ margin: 0px; padding: 0px; }
.pfixed
{ background: blue; color: white; width: 100%; position: fixed; padding: 3px;
}
</style>
</head>
<body>
<div class="pfixed">Zocoding</div>
</body>
Hasil Code di atas:
Oke stelah anda tulis silakan run codenya lalu lihatlah hasilnya apakah text zocoding yang dibungkus dengan background biru akan tetap diam di tempat walaupun kita scroll kebawah? Jika iya selamat anda telah berhasil membuat header diam ditempat dengan css position fixed :)
Kalau agan belum paham tentang code di atas ane akan jelaskan dengan singkat code yang menurut ane penting anda pahami di bawah ini. Oh iya yang ane jelasin khusus cssnya saja kalo tag yang lain cuman pelengkap aja gan :) ok
- body
{ margin: 0px; padding: 0px; }
Bagian ini berfungsi supaya konten yang kita buat akan memenuhi layar tanpa ada margin dan padding karena semuanya kita buat 0px.
- .pfixed
{ background: blue; color: white; width: 100%; position: fixed; padding: 3px;
Nah pada bagian inilah kita buat konten position fixednya, code css di atas berfungsi untuk membuat sebuah konten dengan class pfixed berwarna biru ( background: blue; ), huruf putih ( color: white; ), lebar menyesuaikan device ( width: 100%; ), jarak padding 3px ( padding: 3px; ) dan memliki sifat position fixed ( position: fixed; ).
Oh iya jika agan ingin melihat hasil dari code diatas ane saranin taruh code di atas dibagian header yang dibawahnnya memiliki konten agar bisa di scroll.
Sekian tutorial tentang cara membuat header diam di tempat dengan css position fixed. Semoga bisa bermanfaat bagi agan-agan semua.
0 Response to "Membuat Header Diam Di Tempat dengan Css Position Fixed"
Posting Komentar