NTM Solutions

Thứ Năm, 6 tháng 4, 2017

Tự học Bootstrap - Cơ bản - bài 31 – Scrollspy

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

Ví dụ sau cho thấy cách tạo 01 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>


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>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48