Tampilan Header Tetap Diam Ketika di Scroll

Header adalah sebuah bidang yang berisi logo situs, nama situs, navigasi menu, dan kotak pencarian.

Header adalah sebuah bidang yang berisi logo situs, nama situs, navigasi menu, dan kotak pencarian. Dalam beberapa kasus, tentu kamu akan menemukan sebuah situs yang memiliki menu navigasi ataupun header yang memiliki posisi tetap walaupun discroll. Hal ini bernama header position fixed.

Kamu tidak memerlukan sentuhan script untuk hal ini, tentu masih banyak tampilan situs yang menggunakan script agar menubar maupun header tersebut fixed dengan menggunakan bantuan script.

Mengapa mengiginkan posisi header tetap diam ketika discroll? Hal ini agar pembaca situs kamu tetap melihat ada menubar ataupun kategori bacaan lainnya sebelum dia meninggalkan situs kamu. Ini tentu akan berdampak baik pada situs kami.

1. Style

Tempatkan kode berikut ini didalam bidang <head> atau sebelum </head>

<style>
#header{
background:#ddd;
width:100%;
position:fixed;
padding:10px;
z-index : 9999;
}
.menubar{
max-width:100%;
float:left;
}
.menubar a{
padding:12px;
}
</style>

2. Div

Ini adalah bagian yang akan terlihat didalam layar, tempelkan kode berikut ini setelah <body> atau dibawahnya <body>

<div id='header'>
<div class='menubar'>
<a href=''>Menu1</a>
<a href=''>Menu2</a>
<a href=''>Menu3</a>
</div>
</div>

Penjelasan <style>
  • Menggunakan perintah position:fixed agar posisi header tersebut selalu diam ataupun tidak ikut bergerak ketika situs discroll.
  • Menggunakan perintah z-index:9999 agar tampilan header selalu tampil paling depan yang berarti header ini tidak akan bisa ditutupi oleh tampilan lainnya dalam situs kamu.
  • Menggunakan padding agar memberikan jarak antara suatu bidang dengan bidang lainnya, seperti memberikan spasi agar tampilan header kamu tidak saling berdempetan yang membuat tampilan menjadi tidak rapi
Itulah cara agar tampilan header tetap diam ketika discroll versi PenggemarKoding. Semoga bermanfaat dan terima kasih telah membaca.

Ditulis oleh : PenggemarKoding
Diedit pada : 10 Juli 2020
Sumber gambar : PenggemarKoding


Artikel ini telah dicek dan memiliki nilai 100% keaslian tanpa plagiat