Bài 11: Scrollspy – Hiệu ứng điều hướng khi cuộn trang trong Bootstrap

Trong bài này, chúng ta sẽ tìm hiểu về scrollspy – hiệu ứng điều hướng khi cuộn trang trong Bootstrap. Ngoài ra, để kết hợp với scrollspy, mình cũng hướng dẫn thêm về cách tạo menu cố định khi cuộn trang.

Video – Scrollspy – Hiệu ứng điều hướng khi cuộn trang trong Bootstrap

Tài liệu tham khảo thêm: Scrollspy – Bootstrap

Giới thiệu về Scrollspy và điều hướng cuộn trang

Khi click vào Home ở trên thanh menu, sẽ chuyển đến phần nội dung của Home

Hướng dẫn chi tiết

⭐️ Phần Menu

Mình sẽ tạo một thanh menu đơn giản

<nav class="navbar navbar-light bg-light justify-content-start sticky-top" id="my-menu">
   <a class="navbar-brand" href="">Menu</a>
   <a class="nav-link" href="#home">Home</a>
   <a class="nav-link" href="#product">Product</a>
   <a class="nav-link" href="#contact">Contact</a>
</nav>

Thanh menu gồm các class:

+ navbar: tạo thanh menu

+ navbar-light bg-light: màu nền

+ justify-content-start: canh lề trái cho các thẻ a bên trong

+ sticky-top: cố định menu khi cuộn trang

Và đặc biệt thẻ nav cần có id

Thẻ a: điều quan trọng là phải có href=”#id-khối nội-dung”

Ngoài ra, nếu các bạn chưa hiểu rõ về menu trong Bootstrap, có thể xem lại Bài 9 – Navs và Bài 10: Navbar nhé.

⭐️ Phần nội dung

Phần nội dung sẽ có 1 khối div bao ngoài có 2 thuộc tính data-spy=”scroll” và data-target=”#id-menu”

<div class="mt-3" data-spy="scroll" data-target="#my-menu" data-offset="0">
   <div id="home">
      <h2>Home</h2>
      <p>...</p>
   </div>
   <div id="product">
      <h2>Product</h2>
      <p>...</p>
   </div>
   <div id="contact">
      <h2>Contact</h2>
      <p>...</p>
   </div>
</div>

Các khối nội dung sẽ có 1 id trùng với id trong href của thẻ a ở thanh menu.

Phần menu để cố định khi cuộn trang, các bạn dùng thêm class stick-top hoặc fixed top cho thẻ nav nhé.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ