Bootstrap: Affix affix.js

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:

1. 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í.
2. 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ập position: fixed; (được hỗ trợ bởi CSS của Bootstrap).
3. 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êm position: 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".

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.