Plugin Bootstrap Scrollspy (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 một cuộn cuộn
Ví dụ sau đây cho thấy cách tạo một cuộn cuộn:
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ử »Ví dụ giải thích
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.
Menu dọc dạng cuộn
Trong ví dụ này, chúng tôi sử dụng công cụ điều hướng dọc của Bootstrap làm menu:
Ví 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> Hãy tự mình thử »Tham khảo đầy đủ 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 cuộn, hãy truy cập Tài liệu tham khảo Bootstrap JS Scrollspy của chúng tôi.
