Làm thế nào để tạo: Thu nhỏ menu điều hướng khi cuộn

Làm thế nào để thu nhỏ thanh điều hướng khi cuộn

Bước 1 - Thêm HTML:

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

<div id="navbar">
  <a href="#default" id="logo">CompanyLogo</a>
  <div id="navbar-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

Bước 2 - Thêm CSS:

Đặt样式 cho thanh điều hướng:

/* Tạo thanh điều hướng dính/giữ cố định */
#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px; /* Biên độ không gian lớn hơn, sẽ thu nhỏ khi cuộn (sử dụng JS) */
  transition: 0.4s; /* Tạo hiệu ứng chuyển đổi khi biên độ không gian giảm nhỏ */
  position: fixed; /* Thanh điều hướng dính/giữ cố định */
  width: 100%;
  top: 0; /* Ở trên cùng */
  z-index: 99;
}
/* Đặt样式 cho liên kết trong thanh điều hướng */
#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}
/* Đặt样式 cho logo */
#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}
/* Đặt样式 cho liên kết khi di chuột qua */
#navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* Đặt样式 cho liên kết hoạt động/trang hiện tại */
#navbar a.active {
  background-color: dodgerblue;
  color: white;
}
/* Hiển thị một số liên kết ở bên phải */
#navbar-right {
  float: right;
}
/* Thêm tính năng tương ứng - Trên màn hình có độ rộng nhỏ hơn 580 điểm ảnh, hiển thị thanh điều hướng theo chiều dọc thay vì chiều ngang */
@media screen and (max-width: 580px) {
  #navbar {
    padding: 20px 10px !important; /* Sử dụng !important để đảm bảo JavaScript sẽ không che phủ nội边距 trên màn hình nhỏ */
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
}

Bước 3 - Thêm JavaScript:

// Khi người dùng cuộn từ đầu trang xuống dưới 80 điểm ảnh, điều chỉnh nội边距 của thanh điều hướng và cỡ chữ của biểu tượng
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "30px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  }
    document.getElementById("navbar").style.padding = "80px 10px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}

Thử ngay