Bootstrap 4 - Bootstrap ScrollSpy

Tạo Scrollspy bằng Bootstrap

Trước tiên, bạn phải hiểu được Scrollspy là gì? Scrollspy là hiệu ứng show từng nội dung khi mình scroll mouse. Để làm được điều này thì ở thẻ body bạn phải đặt thêm class data-spy=”scroll” để thanh điều hướng có thể chuyển hướng đến các phần tử trong thẻ body. Sau đó thêm thuộc tính data-target vào các thành phần cha. Đặc biệt ở thẻ css ở thẻ body phải để position là relative.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  body {
      position: relative; 
  }
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Section 3</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Section 4
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#section41">Link 1</a>
        <a class="dropdown-item" href="#section42">Link 2</a>
      </div>
    </li>
  </ul>
</nav>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

</body>
</html>

Xem ví dụ

Giải thích ví dụ:
– Thêm data-spy=”scroll” vào phần tử được dùng là 1 vùng cuộn (thông thường 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 chắc chắn navbar được kết nối với vùng cuộn. Lưu ý các phần tử cuộn phải khớp chỉ số id với liên kết bên trong thanh navbar (div id=”section1″ phải khớp với liên kết a href=”#section1″).
– Thuộc tính tùy chọn data-offset đặc tả số pixel tới offset từ top khi tính toán vị trí cuộn. Điều này giúp bạn cảm thấy liên kết bên trong thanh navbar thay đổi thay đổi trạng thái kích hoạt quá sớm hoặc quá muộn khi chuyển đến các phần tử cuộn. Mặc định của giá trị data-offset là 10px.

Lưu ý: Phần tử có data-spy = "scroll" yêu cầu thuộc tính position có giá trị "relative", với giá trị "relative" để hoạt động bình thường.


Menu cuộn theo chiều dọc

Trong ví dụ này, chúng ta tiếp tục tìm hiểu 1 menu cho thể thay đổi vị trí các mục con khi cuộn đến nội dung của mục tương ứng.

Ví dụ:

<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">

  <div class="container-fluid">
    <div class="row">
      <nav class="col-sm-3 col-4" id="myScrollspy">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#section1">Section 1</a>
          </li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9 col-8">
        <div id="section1">
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the menu while scrolling!</p>
        </div>
        ...
      </div>
    </div>
  </div>

</body>

Xem ví dụ