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.
Nội dung chính
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
Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì.
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
Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì.
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.
Chào bạn cho mình hỏi làm thế nào để khi lăn chuột xuống phía dưới thì menu di chuyển cùng.