CSS position: sticky: Vì sao phần tử không bám khi cuộn?

Mục lục bên cạnh bài viết cần đi theo người đọc, nhưng đã đặt position: sticky mà nó vẫn trôi khỏi màn hình. Trước khi thêm JavaScript, hãy kiểm tra ba thứ: ngưỡng bám, phần tử tổ tiên quản lý cuộn và khoảng trống để phần tử di chuyển.

1. Sticky cần một ngưỡng bám

Theo tài liệu position của MDN, sticky vẫn tham gia luồng bố cục thông thường. Muốn bám theo chiều dọc, cần đặt một giá trị như top: 16px; nếu cả hai inset trên trục đó đều là auto, sẽ không có hiệu ứng bám trên trục đó.

.toc {
  position: sticky;
  top: 16px;
}

Đoạn này chưa đủ bảo đảm thành công trong mọi bố cục. Nó chỉ khai báo hành vi và ngưỡng; cấu trúc bao quanh vẫn quyết định phần tử có chỗ để bám hay không.

2. Dựng một ví dụ tối giản để so sánh

Tạo một trang thử riêng với HTML dưới đây. Chiều cao tối thiểu của nội dung chỉ phục vụ việc tạo quãng cuộn cho ví dụ, không phải quy tắc áp dụng cho bài viết thật.

<div class="layout">
  <aside class="toc">Mục lục bài viết</aside>
  <main class="reading">Nội dung dài để thử cuộn</main>
</div>

<style>
  .layout {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .toc {
    position: sticky;
    top: 16px;
    padding: 16px;
    background: #eef4f8;
  }
  .reading { min-height: 180vh; }
  @media (max-width: 48rem) {
    .layout { grid-template-columns: 1fr; }
    .toc { position: static; }
  }
</style>

Trong ví dụ này, mục lục ngắn nằm cạnh cột nội dung dài. align-items: start tránh để mục lục bị kéo cao bằng cả hàng grid. Khi đưa về dự án, thay chiều cao giả bằng nội dung thật và thử cả bài ngắn lẫn bài dài.

3. Tìm đúng vùng cuộn

Sticky không nhất thiết bám theo cửa sổ trình duyệt. MDN lưu ý rằng tổ tiên gần nhất có cơ chế cuộn, chẳng hạn overflow: auto, scroll hoặc hidden, có thể trở thành mốc của nó, kể cả khi tổ tiên đó không phải vùng người dùng đang cuộn.

Mở DevTools, chọn mục lục rồi đi ngược từng phần tử cha. Xem giá trị computed của overflow-x và overflow-y, không chỉ dòng CSS đang nhìn thấy. Tạm tắt từng khai báo overflow trong DevTools để xác định phần tử làm thay đổi hành vi.

Nếu thiết kế thật sự cần một panel cuộn riêng, hãy thử cuộn chính panel đó. Nếu overflow chỉ dùng để che phần trang bị tràn ngang, cần tìm nguyên nhân tràn trước khi đổi cấu trúc. Không xóa hàng loạt overflow vì có thể phá clipping hoặc bố cục khác.

4. Kiểm tra chiều cao và giới hạn của khối chứa

Sticky bị giới hạn bởi khối chứa; nó không bám vô hạn qua mọi phần của trang. Một wrapper chỉ cao bằng mục lục có thể khiến mục lục gần như không có quãng di chuyển. Tương tự, mục lục bị kéo giãn bằng cột nội dung sẽ không còn khoảng trống hữu ích.

Hãy quan sát kích thước mục lục và wrapper bằng công cụ highlight của DevTools. Thử đặt align-self: start trên phần tử sticky nếu nó là grid item bị stretch. Với flexbox, cần xem cả hướng trục và quy tắc căn chỉnh; không sao chép cách sửa grid mà bỏ qua bố cục thực tế.

Mục lục dài hơn vùng nhìn thấy cũng là một vấn đề trải nghiệm. Có thể bỏ sticky ở màn hình thấp hoặc tổ chức lại mục lục. Nếu chọn giới hạn chiều cao và cho mục lục cuộn riêng, cần kiểm tra việc dùng bàn phím và tránh tạo vùng cuộn lồng nhau khó thao tác.

5. Phân biệt không bám với bị che

Cuộn trang và theo dõi vị trí phần tử trong DevTools. Nếu nó đã giữ vị trí nhưng bị header che, hãy kiểm tra khoảng cách top và thứ tự lớp. Ví dụ, với header cố định cao 64px, có thể thử top: 80px để chừa thêm 16px; đây là số đo minh họa, không phải giá trị dùng chung.

z-index không tạo ra quãng cuộn hoặc sửa ngưỡng còn thiếu. Tăng số rất lớn cũng không bảo đảm vượt qua mọi stacking context của tổ tiên. Ưu tiên hiểu lớp nào đang che trước khi thay đổi thứ tự hiển thị.

6. Checklist trước khi đưa lên website

• Có ngưỡng bám khác auto trên đúng trục cần dùng.
• Đã xác định vùng thực sự được cuộn và kiểm tra overflow của tổ tiên.
• Khối chứa có đủ quãng di chuyển; phần tử không bị stretch ngoài ý muốn.
• Thử đầu, giữa và cuối bài, cả nội dung ngắn lẫn dài.
• Thử màn hình hẹp, cửa sổ thấp, phóng to chữ và điều hướng bằng bàn phím.
• Mục lục không che nội dung, liên kết hoặc phần tử đang được focus.

Kết luận: Khi sticky không hoạt động như mong đợi, hãy chẩn đoán theo thứ tự ngưỡng bám → vùng cuộn → kích thước khối chứa → lớp che phủ. Cách kiểm tra này giúp sửa đúng nguyên nhân và giữ bố cục dễ bảo trì.