Khi viết một bài blog hoặc trang web có nhiều nội dung, việc có một mục lục có thể giúp độc giả dễ dàng điều hướng và tìm kiếm thông tin, sẽ biết được tổng quan bài viết của bạn. Một cách thú vị để tạo mục lục cho trang web của bạn là sử dụng thuộc tính CSS
position: sticky.
Bài viết này sẽ hướng dẫn bạn cách tạo một mục lục cho blog của bạn sử dụng thuộc tính position: sticky.
1. Thuộc tính "position: sticky"
position: sticky là một giá trị của thuộc tính position trong CSS, cho phép bạn làm cho một phần tử (element) cuộn theo cuộn trang, nhưng sau khi cuộn đến một khoảng cách cụ thể từ cạnh trên hoặc dưới của viewport, nó sẽ "đứng yên" ở vị trí đó.
Có 2 loại sticky chính, đó là sticky item và sticky container.
- Sticky item là một element mà chúng ta style cho nó là
position: sticky. Element này sẽ nổi trên màn hình (viewport) dựa trên vị trí mà chúng ta định nghĩa cho nó.
Ví dụ: top: 0px hoặc bottom: 0px.
.sticky-component {
position: sticky;
top: 0px;
}
- Sticky container là một element cha chứa các element con có thuộc tính
position:sticky. Đây là một vùng giới hạn mà các element con cóstickyđược phép hoạt động. Khi bạn có một element con vớiposition: stickythì lúc đó bạn đang tự động định nghĩa element cha là một sticky container. Điều này rất quan trọng, container là một phạm vi mà các sticky item bên trong không thể vượt ra bên ngoài nó.
2. Mục lục với "position: sticky"
Để tạo mục lục bằng position: sticky, bạn cần thực hiện các bước sau:
Bước 1: HTML - Tạo cấu trúc mục lục
<div class="sidebar">
<h2>Mục lục</h2>
<ul>
<li><a href="#section-1">Phần 1</a></li>
<li><a href="#section-2">Phần 2</a></li>
<li><a href="#section-3">Phần 3</a></li>
</ul>
</div>
Bước 2: CSS - Định dạng và sử dụng "position: sticky"
.sidebar {
position: sticky;
top: 20px; /* Điều chỉnh khoảng cách từ trên cùng của viewport */
max-height: 90vh; /* Nếu bạn không chỉ định độ cao 'height' cho phần tử cha, hãy chỉ định cho chính sticky item nếu không sticky sẽ không hoạt động đúng */
}
Bước 3: Đặt ID cho các phần của blog để tạo liên kết đến mục lục
<!-- Nội dung phần 1 -->
<h3 id="section-1">Phần 1</h3>
<!-- Nội dung phần 2 -->
<h3 id="section-2">Phần 2</h3>
<!-- Nội dung phần 3 -->
<h3 id="section-3">Phần 3</h3>
Sử dụng thuộc tính position: sticky để tạo mục lục là một cách hiệu quả để tối ưu hóa trải nghiệm của độc giả trên trang web hoặc blog của bạn. Nó giúp người đọc dễ dàng điều hướng và tiếp cận nội dung quan trọng mà bạn muốn chia sẻ. Hy vọng rằng hướng dẫn này đã giúp bạn hiểu cách sử dụng position: sticky để tạo mục lục cho trang web của bạn.
3. Demo