Bootstrap 5: Scrollspy

Scrollspy

Scrollspy được sử dụng để theo dõiCuộnĐịa điểm tự động cập nhật danh sách liên kết trong danh sách chỉ đường.

Cách tạo Scrollspy

Cách tạo Scrollspy

Dưới đây là ví dụ về cách tạo Scrollspy:

Thực例
<!-- Khu vực cuộn -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Thanh導航栏 - Các yếu tố <a> được sử dụng để nhảy sang phần nào đó trong khu vực cuộn -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Phần 1</a></li>
</nav>
<div id="section1">
  <!-- Phần 1 -->
  <h1>Phần 1</h1>
<p>Hãy thử cuộn trang này và xem thanh導航栏 khi cuộn!</p>
</div>
...

</body>

Thử trực tiếp

Giải thích ví dụ data-bs-spy="scroll" Thêm vào yếu tố được sử dụng làm khu vực cuộn (thường là <body> yếu tố）。

Sau đó thêm data-bs-target Thuộc tính, giá trị là id hoặc tên lớp của thanh導航栏 (.navbar）。 Điều này nhằm đảm bảo thanh導航栏 và khu vực cuộn được kết nối.

Lưu ý, các yếu tố cuộn phải khớp với ID của liên kết trong danh sách mục thanh導航栏 (<div id="section1"> Khớp <a href="#section1">）。

Tùy chọn data-bs-offset Thuộc tính quy định số pixel chênh lệch từ trên xuống khi tính vị trí cuộn. Khi các liên kết trong thanh導航栏 nhảy sang các yếu tố cuộn, nếu bạn cảm thấy thay đổi trạng thái hoạt động sớm quá, điều này rất hữu ích. Giá trị mặc định là 10 pixel.

Cần định vị tương đối：Các yếu tố có thuộc tính data-bs-spy="scroll" cần CSS Chỉnh vị trí Giá trị thuộc tính cần được thiết lập thành "relative" mới có thể hoạt động bình thường.