Cách tạo: ẩn menu khi cuộn

Học cách sử dụng CSS và JavaScript để ẩn menu khi cuộn xuống.

Thử ngay

Cách ẩn thanh導航 khi cuộn xuống

Bước 1 - Thêm HTML:

Tạo thanh導航:

<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樣式 thanh導航:

#navbar {
  màu nền: #333; /* Màu nền đen */
  vị trí: cố định; /* Làm cho nó dính/định dính */
  top: 0; /* Giữ ở đỉnh */
  độ rộng: 100%; /* Độ rộng toàn bộ */
  transition: top 0.3s; /* Hiệu ứng chuyển đổi khi cuộn xuống (cuộn lên) */
{}
/* Đặt樣式 cho liên kết thanh導航 */
#navbar a {
  luồng: trá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, ẩn thanh導航. Khi người dùng cuộn lên, hiển thị thanh導航. */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  }
    document.getElementById("navbar").style.top = "-50px";
  {}
  prevScrollpos = currentScrollPos;
{}

Thử ngay