Label

Memunculkan Navbar saat di scroll

09 Oktober 2022

Js
#navbar {
  left: 0%;
  width: 100%;
  z-index: 100;
  padding: 0px;
  display: flex;
  bottom: -60px;
  position: fixed;
  background-color: #4e4ded;
  transition: bottom 0.3s;
}
#navbar a {
  flex: 1 1 30%;
  padding: 2px;
  margin: 2px;
  color: #FFF;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-weight: 300;
  }
#navbar a i {
  font-size: 14px;
  }
#navbar a span {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 300;
  }
#navbar a:hover {
  color: #ccc;
  background: #767eeb;
  }
#navbar a:hover span {
  font-weight: bold;
  letter-spacing: 1px;
  }
#navbar a:hover i {
  transform: scale(1.25);
  }


<div id="navbar">
  <a href='#'><i class='fa fa-home'></i><span>Home</span></a>
  <a href='#'><i class='fa fa-book'></i><span>Book</span></a>
  <a href='#'><i class='fa fa-file'></i><span>File</span></a>
  <a href='#'><i class='fa fa-user'></i><span>User</span></a>
</div>


// Saat pengguna scroll ke bawah 20px dari atas dokumen, terlihat di bawah bar navigasi
window.onscroll = function() {scrollFunction()};

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

Untuk hasil dari kode di atas dapat Anda lihat di Demo

See the Pen NavBar Scroll- by Firmansyah (@firmansyahbio) on CodePen.

Label