Cách tạo: tiêu đề cố định khi cuộn

Học cách sử dụng CSS và JavaScript để tạo tiêu đề cố định/gắn dính khi cuộn.

thử trực tiếp

Tạo tiêu đề cố định khi cuộn

Bước 1 - Thêm HTML:

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

Bước 2 - Thêm CSS:

thiết lập樣式 cho đầu trang; thêm position: dính và top: 0 để làm cho đầu trang duy trì cố định khi cuộn lên đỉnh. 
.header {
  vị trí: dính;
  trên cùng: 0;
  keo dính: 10px 16px;
  nguồn: #555;
  màu: #f1f1f1;
}

thử trực tiếp

element được thiết lập vị trí: dính; sau đó, vị trí của nó sẽ được xác định dựa trên vị trí cuộn của người dùng.

Các yếu tố dính sẽ chuyển đổi giữa vị trí liên kết và cố định dựa trên vị trí cuộn. Trước khi đạt đến vị trí chênh lệch đã định trong khung nhìn, nó duy trì vị trí liên kết; đạt được sau đó, nó sẽ“dính”ở vị trí đó (như vị trí: cố định như vậy).

Lưu ý:Để làm cho vị trí dính hoạt động, bạn phải ít nhất chỉ định trên cùng、phải、dưới cùng hoặc left 中的一个。

Trang liên quan

Hướng dẫn:CSS position