Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
Plugin 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.
Để biết hướng dẫn về Scrollspy, hãy đọc Hướng dẫn về Bootstrap Scrollspy của chúng tôi.
Mẹo: Plugin Scrollspy thường được sử dụng cùng với plugin Affix .
Thông qua thuộc tính data-*
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à phần tử <body> ).
Sau đó thêm thuộc tính data-target với giá trị id hoặc tên lớp của thanh điều hướng ( .navbar ). Điều này nhằm đả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"> khớp với <a href="#section1"> ).
Thuộc tính data-offset tùy chọn chỉ định số pixel cần bù từ trên xuống khi tính toán vị trí cuộn. Điều này hữu ích khi bạn cảm thấy 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 sang các phần tử có thể cuộn. Mặc định là 10 pixel.
Yêu cầu định vị tương đối: Phần tử có data-spy="scroll" yêu cầu thuộc tính vị trí CSS, có giá trị "tương đối" để hoạt động bình thường.
Ví 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-inverse navbar-fixed-top">
...
<ul class="nav
navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</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>
Hãy tự mình thử » Thông qua JavaScript
Kích hoạt thủ công với:
Tùy chọn cuộn
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với thuộc tính dữ liệu, hãy thêm 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 | Try it |
Phương pháp cuộn
Bảng sau liệt kê tất cả các phương thức cuộn có sẵn.
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document | Try it |
Sự kiện Scrollspy
Bảng sau liệt kê tất cả các sự kiện cuộn có sẵn.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy | Try it |
Thêm ví dụ
Scrollspy với cuộn hoạt hình
Cách thêm cuộn trang mượt mà vào neo trên cùng một trang:
Cuộn trơn
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
}); Hãy tự mình thử »Scrollspy & Affix
Sử dụng plugin Affix cùng với plugin Scrollspy:
Menu ngang (Thanh điều hướng)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Hãy tự mình thử »Menu dọc (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> Hãy tự mình thử »