Công
cụ Scrollspy
Công
cụ Scrollspy dùng để tự động cập nhật liên kết dựa
vào vị trí thanh cuộn
Cách tạo Scrollspy
<!--
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>
<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ử được dùng như khu vực có thể cuộn được
(thường là thẻ <body>).
Sau
đó thêm thuộc tính
data-target
với
01 giá trị id hoặc tên lớp của thanh điều hướng
(.navbar).
Điều này đảm bảo rằng navbar được kết nối đến
khu vực có thể cuộn.
Chú
ý rằng phần tử có thể cuộn phải khớp ID với liên
kết bên trong danh sách các mục navbar (
<div
id="section1"> khớp
với <a
href="#section1">).
Thuộc
tính tùy chọn
data-offset xác
định số pixels đến vị trí dịch chuyển tính từ đỉnh
khi bắt đầu cuộn đến nội dung định trước. Điều
này là hữu ích khi bạn cảm thấy các liên kết bên
trong navbar thay đổi trạng thái hiện hành quá nhanh hoặc
quá sớm khi nhảy qua lại giữa các điểm cuộn. Mặc
định nên đặt 10 pixels.
Đòi
hỏi cấu hình thuộc tính position là relative: Phần
tử với data-spy="scroll" đòi hỏi định vị trí
bằng thuộc tính CSS, với 01 giá trị position là "relative"
để hoạt động chính xác.
Menu dọc trong Scrollspy
Trong ví dụ này, chúng ta dùng menu Bootstrap dọc dạng ô vuông:
<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>
<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>
Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48
Không có nhận xét nào:
Đăng nhận xét