Show/Hide Navbar Pada saat Scroll Keatas atau Kebawah

Demo Download

Raja Kode - Komponen sticky navbar yang cerdas dan user-friendly yang secara otomatis menampilkan dan menyembunyikan navbar tergantung pada arah scroll pengguna.

Script ini mendeteksi scroll event, menentukan apakah halaman discroll ke atas atau ke bawah, dan kemudian menerapkan class CSS yang sesuai ke bilah navigasi.

Cara Memasang

1. Buat fixed navbar di website kamu

<header>
  ... navbar here ...
</header>
<main>
  ... main content here ...
</main>

header {
  display: flex;
  justify-content: space-between;
  padding: 2rem 5rem;
  background: #4F46E5;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 300ms ease;
  z-index: 10;
}

2. Terapkan ‘scroll-up’ atau ‘scroll-down’ pada class CSS tergantung pada scroll.

const body = document.body;
const header = document.querySelector("header");
const main = document.querySelector("main");
const headerHeight = document.querySelector("header").offsetHeight;
main.style.top = headerHeight + "px";
let lastScroll = 0;
window.addEventListener("scroll", () => {
  let currentScroll = window.pageYOffset;
  if (currentScroll - lastScroll > 0) {
    header.classList.add("scroll-down");
    header.classList.remove("scroll-up");
  } else {
    // scrolled up -- header show
    header.classList.add("scroll-up");
    header.classList.remove("scroll-down");
  }
  lastScroll = currentScroll;
})