Bootstrap JS Scrollspy
JS Scrollspy
Scrollspy được sử dụng để tự động cập nhật các liên kết trong danh sách điều hướng dựa trên vị trí cuộn.
Để có hướng dẫn về Scrollspy, hãy đọc Hướng dẫn về Bootstrap Scrollspy của chúng tôi .
Qua dữ liệu- * Thuộc tính
Thêm data-spy="scroll"vào phần tử sẽ được sử dụng làm vùng có thể cuộn (thường đây là <body>phần tử).
Sau đó, thêm data-targetthuộc tính với một giá trị của id hoặc tên lớp của thanh điều hướng ( .navbar). Điều này là để đảm bảo rằng thanh điều hướng được kết nối với vùng có thể cuộn.
Lưu ý rằng các phần tử có thể cuộn phải khớp với ID của các liên kết bên trong các mục danh sách của thanh điều hướng ( <div id="section1">đối sánh <a href="#section1">).
Thuộc tính tùy chọn data-offsetchỉ định số lượng pixel cần bù từ trên xuống khi tính toán vị trí của cuộn. Điều này hữu ích khi bạn cảm thấy rằng các liên kết bên trong thanh điều hướng thay đổi trạng thái hoạt động quá sớm hoặc quá sớm khi chuyển đến các phần tử có thể cuộn. Mặc định là 10 pixel.
Yêu cầu vị trí tương đối: Phần tử có data-spy = "scroll" yêu cầu thuộc tính CSS position , với giá trị "tương đối" để hoạt động bình thường.
Thí dụ
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-offset="50">
<!-- The navbar - The
<a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</nav>
<!-- Section 1
-->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at
the navigation bar while scrolling!</p>
</div>
...
</body>
Qua JavaScript
Bật theo cách thủ công với:
Thí dụ
$('body').scrollspy({target: ".navbar"})
Tùy chọn cuộn
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-offset = "".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Phương thức cuộn
Bảng sau liệt kê tất cả các phương thức scrollspy có sẵn.
| Method | Description |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
Sự kiện cuộn
Bảng sau đây liệt kê tất cả các sự kiện scrollspy có sẵn.
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |