Bootstrap Scrollspy Plugin (Nâng cao)
Plugin Scrollspy
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.
Cách tạo Scrollspy
Ví dụ sau đây cho thấy cách tạo một cuộn trang:
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-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>
Giải thích ví dụ
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.
Menu dọc Scrollspy
Trong ví dụ này, chúng tôi sử dụng các viên thuốc điều hướng dọc của Bootstrap làm menu:
Thí dụ
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Toàn bộ tham khảo về Bootstrap Scrollspy
Để có tài liệu tham khảo đầy đủ về tất cả các phương thức và sự kiện scrollspy, hãy truy cập Tài liệu tham khảo về Bootstrap JS Scrollspy của chúng tôi .