Plugin gắn kết Bootstrap (Nâng cao)

Plugin gắn kết

Plugin Affix cho phép một phần tử được gắn (khóa) vào một khu vực trên trang. Điều này thường được sử dụng với các menu điều hướng hoặc các nút biểu tượng xã hội, để làm cho chúng "dính" vào một khu vực cụ thể trong khi cuộn lên và xuống trang.

Plugin bật và tắt hành vi này (thay đổi giá trị của CSS position từ static thành fixed ), tùy thuộc vào vị trí cuộn.

Ví dụ 1) Một thanh điều hướng được gắn:

Ví dụ 2) Một thanh bên được dán:

Với Affix, khi chúng ta cuộn lên xuống trang, menu luôn hiển thị và bị khóa ở vị trí của nó.

Cách tạo một menu điều hướng gắn liền

Ví dụ sau đây cho thấy cách tạo menu điều hướng được gắn ngang:

Ví dụ sau đây cho thấy cách tạo menu điều hướng được gắn theo chiều dọc:

Ví dụ giải thích

Thêm data-spy="affix" vào phần tử bạn muốn gắn.

Tùy ý, thêm thuộc tính data-offset-top|bottom để tính toán vị trí cuộn.

Làm thế nào nó hoạt động

Plugin gắn kết chuyển đổi giữa ba lớp: .affix , .affix-top và .affix-bottom . Mỗi lớp đại diện cho một trạng thái cụ thể. Bạn phải thêm thuộc tính CSS để xử lý các vị trí thực tế, ngoại trừ position:fixed trên lớp .affix .

• Plugin thêm lớp .affix-top hoặc .affix-bottom để cho biết phần tử ở vị trí trên cùng hoặc dưới cùng. Định vị bằng CSS là không cần thiết vào thời điểm này.


• Việc cuộn qua phần tử được gắn liền sẽ kích hoạt gắn kết thực tế - Đây là nơi plugin thay thế lớp .affix-top hoặc .affix-bottom bằng lớp .affix (đặt position:fixed ). Tại thời điểm này, bạn phải thêm thuộc tính CSS top hoặc bottom để định vị phần tử được gắn trong trang.


• Nếu phần bù dưới cùng được xác định, việc cuộn qua nó sẽ thay thế lớp .affix bằng .affix-bottom . Vì offset là tùy chọn nên việc thiết lập offset yêu cầu bạn đặt CSS thích hợp. Trong trường hợp này, hãy thêm position:absolute khi cần thiết.

Trong ví dụ đầu tiên ở trên, plugin Affix thêm lớp .affix (position:fixed) vào phần tử <nav> khi chúng ta đã cuộn 197 pixel từ trên xuống. Nếu mở ví dụ, bạn cũng sẽ thấy rằng chúng tôi đã thêm thuộc tính CSS top có giá trị 0 vào lớp .affix . Điều này nhằm đảm bảo rằng thanh điều hướng luôn ở đầu trang khi chúng ta đã cuộn 197 pixel từ đầu trang.

Scrollspy & Affix

Sử dụng plugin Affix cùng với plugin Scrollspy :

Tham chiếu phụ kiện Bootstrap hoàn chỉnh

Để có tài liệu tham khảo đầy đủ về tất cả các phương thức và sự kiện gắn kết, hãy truy cập Tài liệu tham khảo gắn kết JS Bootstrap của chúng tôi.