Blog Tĩnh #06 – Thêm Table of Contents (TOC) cố định khi cuộn

1. Cấu trúc HTML

Thêm một khối mục lục thủ công ở đầu bài viết:

<nav class="toc">
  <strong>Mục lục</strong>
  <ul>
    <li><a href="#gioi-thieu">Giới thiệu</a></li>
    <li><a href="#cai-dat">Cài đặt</a></li>
    <li><a href="#ket-luan">Kết luận</a></li>
  </ul>
</nav>

<h3 id="gioi-thieu">Giới thiệu</h3>
...

2. CSS để TOC dính (sticky)

.toc {
  position: sticky;
  top: 1rem;
  background: #f9f9f9;
  padding: 1rem;
  border-left: 4px solid #ccc;
  margin-bottom: 2rem;
  max-width: 300px;
  font-size: 0.95em;
}

@media (max-width: 768px) {
  .toc {
    position: static;
    max-width: 100%;
    border-left: none;
    border-top: 2px solid #ccc;
  }
}

3. Cách sử dụng

• Gắn TOC bên phải hoặc đầu bài (tuỳ layout)
• Dùng id cho các <h2>, <h3> để link đến đúng đoạn
• Có thể tạo script nhỏ tự sinh TOC nếu cần tự động hóa (viết sau nếu bro cần)

4. Mẹo hiển thị đẹp

.toc ul {
  list-style: none;
  padding-left: 0;
}

.toc li {
  margin-bottom: 0.5rem;
}

.toc a {
  text-decoration: none;
  color: #0066cc;
}
.toc a:hover {
  text-decoration: underline;
}

5. Cân nhắc TOC bên sidebar

Nếu bạn chia layout 2 cột:

.layout {
  display: flex;
  gap: 2rem;
}

.main {
  flex: 3;
}

.sidebar {
  flex: 1;
  position: sticky;
  top: 1rem;
}

TOC nâng cao?

Nếu muốn TOC tự sinh hoặc highlight mục đang đọc, bạn cần thêm JS (viết riêng nếu bro yêu cầu). Nhưng bản đơn giản như trên là đủ dùng cho blog cá nhân – gọn, sạch, dễ scan nội dung.

Chúc bạn làm TOC gọn gàng – tăng trải nghiệm đọc – và giữ layout blog chuẩn mực, không rối rắm.