Bootstrap: Affix affix.js
Giải phóng thời gian, khai phóng năng lực
Các ví dụ
Menu điều hướng nằm bên phải trang này chính là một ví dụ trực tiếp về plugin affix.
Cách sử dụng
Bạn có thể sử dụng plugin affix thông qua các thuộc tính dữ liệu hoặc JavaScript. Bất kể bằng cách nào, bạn cũng đều phải thêm CSS để xác định vị trí cho nội dung của bạn.
Định vị thông qua CSS
Plugin affix chuyển qua lại giữa 3 class, mỗi class thể hiện một trạng thái cụ thể: .affix
, .affix-top
, và .affix-bottom
. Tuy nhiên, bạn cũng sẽ phải tự mình thêm style cho các class này (không phụ thuộc vào plugin) để quản lý vị trí thực tế của nội dung.
Và đây là cách mà plugin affix hoạt động:
- Khi bắt đầu, plugin thêm vào class
.affix-top
để chỉ định phần tử nằm ở vị trí trên cùng. Tại thời điểm này, không yêu cầu sử dụng CSS để xác định vị trí. - Khi cuộn qua phần tử mà bạn muốn đóng cố định, nó sẽ kích hoạt trạng thái đóng cố định. Đây là thời điểm mà
.affix
thay thế cho.affix-top
và thiết lậpposition: fixed;
(được hỗ trợ bởi CSS của Bootstrap). - Nếu tồn tại bottom offset, khi cuộn sẽ thay thế
.affix
bằng.affix-bottom
. Vì offset là tùy chọn nên khi offset được thiết lập sẽ đòi hỏi CSS được thiết lập tương ứng. Trong trường hợp này, hãy thêmposition: absolute;
nếu cần thiết. Plugin sử dụng các thuộc tính dữ liệu hoặc JavaScript để xác định điểm định vị tính từ đó.
Hãy làm theo các bước trên để thiết lập CSS cho các tùy chọn sử dụng ở bên dưới.
Thông qua các thuộc tính dữ liệu
Để dễ dàng thêm hành vi affix vào một phần tử, bạn chỉ cần thêm data-spy="affix"
vào phần tử mà bạn muốn sử dụng. Sử dụng offset để xác định khi nào thì kích hoạt trạng thái "đóng đinh" lên phần tử.
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
...
</div>
Thông qua JavaScript
Kích hoạt plugin affix thông qua JavaScript:
$('#my-affix').affix({
offset: {
top: 100
, bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})
Các tùy chọn
Cac tùy chọn có thể được truyền vào thông qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên của tùy chọn vào sau data-
, tương tự như data-offset-top="200"
.
Tên | Loại | Mặc định | Mô tả |
---|---|---|---|
offset | number | function | object | 10 | Offset tính bằng pixel sử dụng khi tính toán vị trí scroll. Nếu giá trị truyền vào là một số, offset sẽ được áp dụng vào cả phía trên và phía dưới. Để truyền vào giá trị offset cụ thể cho 2 phía, hãy sử dụng đối tượng offset: { top: 10 } hoặc offset: { top: 10, bottom: 5 } . Hãy sử dụng một hàm khi bạn muốn tính toán động giá trị offset. |
target | selector | node | jQuery element | thewindow object |
Chỉ rõ phần tử đích của affix. |
Các sự kiện
Class của plugin affix hỗ trợ một số sự kiện cho phép can thiệp vào tính năng của plugin affix.
Loại sự kiện | Mô tả |
---|---|
affix.bs.affix | Sự kiện này xay ra ngay trước khi phần tử được thiết lập affix. |
affixed.bs.affix | Sự kiện này xay ra sau khi phần tử được thiết lập affix. |
affix-top.bs.affix | Sự kiện này xay ra ngay trước khi phần tử được thiết lập affix-top. |
affixed-top.bs.affix | Sự kiện này xay ra sau khi khi phần tử được thiết lập affix-top. |
affix-bottom.bs.affix | Sự kiện này xay ra ngay trước khi phần tử được thiết lập affix-bottom. |
affixed-bottom.bs.affix | Sự kiện này xay ra sau khi khi phần tử được thiết lập affix-bottom. |
Giải phóng thời gian, khai phóng năng lực