Cách điều chỉnh kích thước tiêu đề khi cuộn

Học cách sử dụng CSS và JavaScript để thu nhỏ tiêu đề khi cuộn.

Thử ngay

Cách làm tiêu đề thu nhỏ khi cuộn

Bước 1 - Thêm HTML:

Tạo tiêu đề trang:

<div id="header">Header</div>

Bước 2 - Thêm CSS:

Đặt phong cách tiêu đề trang:

#header {
  background-color: #f1f1f1; /* Màu nền xám */
  padding: 50px 10px; /* Một số khoảng cách nội bộ */
  color: black;
  text-align: center; /* Đ放置居中文本 */
  font-size: 90px; /* Kích thước phông lớn */
  font-weight: bold;
  position: fixed; /* Vị trí cố định - ở đầu trang của trang */
  top: 0;
  width: 100%; /* Độ rộng toàn màn hình */
  transition: 0.2s; /* Thêm hiệu ứng chuyển đổi (giảm kích thước phông khi cuộn) */
}

Bước 3 - Thêm JavaScript:

// Khi người dùng cuộn từ đầu trang xuống 50px, điều chỉnh kích thước phông của tiêu đề
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.fontSize = "30px";
  }
    document.getElementById("header").style.fontSize = "90px";
  }
}

Thử ngay