Cara Membuat Menu Fixed Top Saat Scroll Down

pasti teman-teman sudah tidak asing lagi dengan sticky menu dimana terdapat sebuah menu yang tetapi di atas walaupun kita scroll kebawah, sekarang CSS sudah menyediakan yang namanya position sticky dimana menu akan tetap di atas, dan bisa juga kita menggunakan position fixed, tetapi disini kita akan membuat menu fixed nya menggunkan javascript.

Jadi walaupun kita bisa menggunakan position sticky dan position fixed tapi saya akan mencobanya menggunakan sebuah javascript, caranya seperti apa, begini di dalam javascript terdapat sebuah fungsi javascript yaitu window.onscroll jadi fungsi ini untuk melihat kita seberapa banyak kita menscrollnya, dan nanti kita hitung, jadi ketika scroll sebanyak 50 menu akan langsung tampil dan jika menu itu akan kita sembunyikan.

Disini saya jadi membuat menu 2 ya, dimana yang satu untuk contoh saat kita scroll yang satu saat berada tetap di atas, Kurang lebih seperti itu, oke langsung saja disini struktur HTMLnya seperti ini saja.

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
<div id="menu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
<div style="padding:15px 15px 2500px;font-size:30px">
  <p><b>Cara Membuat Menu tetap Ada di atas Saat Scroll</b></p>
  <p>Silahkan Scroll Kebawah</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Jika sudah disini terdapat dua menu, yang satu navbar yaitu menu tampil saat scroll dan yang satu yang berada tetap di atas, oke untuk CSSnya seperti ini

body {
  margin: 0;
  background-color: #dff9fb;
  font-family: Arial;
  color: #666
}

#navbar {
  background-color: #eb4d4b;
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
}
#menu{
  background-color: #eb4d4b;
  display: block;
  transition: top 0.3s;
  height: 50px;
}
#menu a{
  color: #f2f2f2;
  line-height: 50px;
  text-decoration: none;
  margin-right: 20px;
  padding-left: 15px;
}
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

dan yang terakhir Javascriptnya

window.onscroll = function() {scrollFunction()}; // saat window di scroll

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}

Oke sekarang kita lihat hasilnya:

bisa dilihat yang pertama adalah tampilan awal sebelum di scroll dan yang kedua adalah setelah di scroll, oke saya rasa cukup sampai disni belajar kita tentang cara membuat menu fixed top saat scroll down, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Cara Membuat Menu Fixed Top Saat Scroll Down

Kategori