Cara Header Tetap Diam Ketika Di Scroll
Untuk membuat header agar tetap diam ketika di scroll dengan CSS, tentu kita akan mengedit sedikit CSS Headernya. Tidak tahu dimana letak CSS? CSS terletak di bagian <head></head> lebih tepatnya di bagian <style> / <style type='text-css'> </style>.
Ketika kamu sudah berada di bagian<style>, maka silahkan cari header. Ketika kamu sudah menemukan header di <style> maka silahkan save code berikut ini tepat dibawah header{
header{
width: 100%;
position:fixed;
z-index:9999;
}
width: 100%;
position:fixed;
z-index:9999;
}
Kemudian silahkan disave. Selamat header blog kamu telah diam / tidak bergerak ketika di scroll. Selamat mencoba.
Namun jika Header kamu menutupi bagian lainnya, maka yang kamu lakukan hanyalah menambahkan kode berikut ini di style body{ .
Margin-top : 3em;
Eits, belum selesai! Selanjutnya agar posisi header kamu kembali ke tempat semula, silahkan save code berikut ini di bagian style header{ kamu
Margin-top: -3em;
Nah setelah kamu mengetahui cara membuat header tetap diam ketika di scroll, maka kerangka lengkapnya akan seperti dibawah ini!.
<!DOCTYPE html>
<html>
<head>
<title> SAYA INGIN BELAJAR </title>
<style>
body{
margin-top3em;
}
.header{
width:100%;
position:fixed;
z-index: 9999;
margin-top: -3em;
}
</style>
</head>
<body>
<div class='header'> INI ADALAH HEADER </div>
</body>
</html>
<html>
<head>
<title> SAYA INGIN BELAJAR </title>
<style>
body{
margin-top3em;
}
.header{
width:100%;
position:fixed;
z-index: 9999;
margin-top: -3em;
}
</style>
</head>
<body>
<div class='header'> INI ADALAH HEADER </div>
</body>
</html>
Mudahkan? Itulah cara membuat Header position:fixed ketika discroll, Semoga bermanfaat dan terima kasih telah mampir, jangan lupa Sharenya!.
S: Penggemarkoding.blogspot.com
0 Response to "Cara Header Tetap Diam Ketika Di Scroll "
Post a Comment