Cách tạo: Cuộn xuống thanh điều hướng khi cuộn trang

Cách cuộn xuống thanh điều hướng

Bước 1 - Thêm HTML:

Tạo thanh điều hướng:

<div id="navbar">
  <a href="#home">Trang chủ</a>
  <a href="#news">Tin tức</a>
  <a href="#contact">Liên hệ</a>
</div>

Bước 2 - Thêm CSS:

Đặt kiểu thanh điều hướng:

#navbar {
  màu nền: #333; /* Màu nền đen */
  vị trí: cố định; /* Gắn hoặc cố định */
  top: -50px; /* Ẩn thanh điều hướng ngoài đầu trang nhìn thấy 50px */
  chiều rộng: 100%; /* Toàn chiều rộng */
  transition: top 0.3s; /* Hiệu ứng chuyển đổi khi cuộn xuống (tăng lên) */
}
/* Đặt kiểu cho liên kết thanh điều hướng */
#navbar a {
  đuôi nổi;
  hiển thị: khối;
  màu: trắng;
  canh giữa văn bản:;
  keo: 15px;
  decoration văn bản: none;
}
#navbar a:hover {
  màu nền: #ddd;
  màu: đen;
}

Bước 3 - Thêm JavaScript:

// Khi người dùng cuộn xuống từ đầu trang của tài liệu 20px, cuộn xuống thanh điều hướng
// Khi người dùng cuộn lên đầu trang của trang, cuộn lên thanh điều hướng (cách đầu trang nhìn thấy 50px)
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  }
}

Thử ngay