Di bawah ini kita akan mempelajari cara membuat header yang tetap / sticky saat mengscroll dengan CSS dan JavaScript.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .top-container { background-color: #f1f1f1; padding: 30px; text-align: center; } .header { padding: 10px 16px; background: #555; color: #f1f1f1; } .content { padding: 16px; } .sticky { position: fixed; top: 0; width: 100%; } .sticky + .content { padding-top: 102px; } </style> </head> <body> <div class="top-container"> <h1>Scroll Down</h1> <p>Scroll down to see the sticky effect.</p> </div> <div class="header" id="myHeader"> <h2>Posisi Header</h2> </div> <div class="content"> <h3>Contoh Sticky Header</h3> <p> Header akan menempel di atas saat mencapai posisi scrollingnya. </p> <p> scrolling kembali ke atas untuk menghilangkan efek sticky. </p> <p>Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..</p> <p>Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..</p> <p>Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..</p> <p>Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..</p> <p>Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..</p> <p>Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..</p> <p>Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..</p> <p>Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..</p> <p>Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..Text untuk mengisi scrolling..</p> </div> <script> window.onscroll = function() {myFunction()}; var header = document.getElementById("myHeader"); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } } </script> </body> </html>
Cara Membuat Sticky Header
Langkah 1) Tambahkan HTML:
Contoh
<div class="header" id="myHeader"> <h2>Header Saya</h2> </div>
Langkah 2) Tambahkan CSS:
Contoh
/* Style untuk header */
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
/* halaman konten */
.content {
padding: 16px;
}
/* Kelas sticky ditambahkan ke header dengan JS saat mencapai posisi akhir scrolling */
.sticky {
position: fixed;
top: 0;
width: 100%
}
/* Tambahkan beberapa padding atas ke konten halaman untuk mencegah gerakan cepat mendadak (karena header mendapat posisi baru di bagian atas halaman (posisi: tetap dan atas: 0) */
.sticky + .content {
padding-top: 102px;
}Langkah 3) Tambahkan JavaScript:
Contoh
// Saat pengguna melakukan scrolling halaman, jalankan myFunction
window.onscroll = function() {myFunction()};
// Dapatkan header
var header = document.getElementById("myHeader");
// Dapatkan posisi offset bilah navigasi
var sticky = header.offsetTop;
// Tambahkan class sticky ke header saat akan mencapai posisi terakhir scrollingnya. Hapus "sticky" saat akan meninggalkan posisi scrolling
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}