Scrollspy trong Bootstrap 4

30-07-2020 00:23:35
by: baobinhnet

Chào các bạn, chúng ta lại quay trở lại với bài học Scrollspy trong bootstrap 4 thuộc series bài giảng về Bootstrap 4. Đây là một trong những phần nâng cao, nhưng lại ứng dụng rất nhiều thực tế , đặc biệt ở các website thuộc dạng one page landing. Ok giờ chúng ta sẽ cùng nhau tìm hiểu về Scrollspy trong Bootstrap 4 nhé.

Scrollspy là gì?

Scrollspy là một khái niệm trong bootstrap 4, sử dụng để tự động cập nhật các liên kết / menu trong danh sách điều hướng dựa trên sự di chuyển của lăn chuột trên trang web.
Ví dụ trên website academy.fullstackcorp.com có các menu Đào tạo - Các khóa học - Dịch vụ - Đội ngũ - Liên hệ, nếu người dùng phải cuộn chuột tìm kiếm thì rất lâu, tuy nhiên scrollspy sẽ giúp người dùng click vào menu nào, sẽ chạy thẳng đến nội dung của menu đó trên trang. Ngoài ra, nếu bạn scroll chuột đến phần nội dung nào thì menu tương ứng với nó cũng sẽ được highlight lên. Đây chính là điểm lợi hạy của cái này.

Cách tạo Scrollspy trong Bootstrap 4

Đầu tiên, Scrollspy là khái niệm liên quan tới cuộn trang cho toàn trang, nên ở thẻ <body>, các bạn cần sử dụng các thuộc tính điều hướng như sau:

<body data-spy="scroll" data-target=".navbar" data-offset="50">

Trong đó:

data-spy=”scroll”: thuộc tính này giúp phần tử body sử dụng làm vùng có thể cuộn trang được.
data-target=”.navbar”: thuộc tính data-target với giá trị là tên class của thanh điều hướng. Cụ thể là thanh danh sách <nav> ở phía dưới. Việc này giúp đảm bảo thanh điều hướng được kết nối với vùng có thể cuộn.
data-offset=”50″: thuộc tính data-offset chỉ định số lượng pixel để bù trừ từ trên cùng khi tính toán vị trí cuộn.

Ok, giờ chúng ta sẽ đến với code hoàn chỉnh nhé:

Tiếp đến, chúng ta sẽ thử làm với menu dọc nhé:

Scrollspy cho Menu điều hướng dọc

Kết luận

Vậy là các bạn đã biết cách dùng scrollspy rồi nhé. Còn học đc luôn cả phần js để tạo hiệu ứng nữa :D. Cái này rất hay sử dụng bên trong website one page landing. Chúc các bạn sẽ học và ứng dụng được nhiều trong thực tế. Hẹn gặp lại các bạn ở bài sau.

Xem thêm: bootstrap bootstrap 4 scrollspy scrollspy trong bootstrap 4

Posted by baobinhnet
2020-07-30 00:23:35

Danh Mục Lập Trình

Baobinh.net

Học Bootstrap 4