Phần tử JS Bootstrap
Phần tử JS (affix.js)
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 vị trí CSS từ tĩnh sang cố định), tùy thuộc vào vị trí cuộn.
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 .
Để biết thêm thông tin, hãy đọc Hướng dẫn gắn Bootstrap của chúng tôi.
Mẹo: Plugin Affix thường được sử dụng cùng với plugin Scrollspy .
Thông qua thuộc tính data-*
Thêm data-spy="affix" vào phần tử bạn muốn theo dõi và thuộc tính data-offset-top|bottom=" number " để tính vị trí của cuộn.
Ví dụ
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Hãy tự mình thử »Thông qua JavaScript
Kích hoạt thủ công với:
Tùy chọn gắn kết
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với thuộc tính dữ liệu, hãy thêm tên tùy chọn vào data-, như trong data-offset="".
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25} For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
Gắn sự kiện
Bảng sau liệt kê tất cả các sự kiện gắn sẵn có.
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
Try it |
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
Try it |
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top ) |
Try it |
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top ) |
Try it |
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom ) |
Try it |
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom ) |
Try it |
Thêm ví dụ
Thanh điều hướng được gắn
Tạo menu điều hướng gắn ngang:
Sử dụng jQuery để tự động gắn thanh điều hướng
Sử dụng phương thức externalHeight() của jQuery để gắn thanh điều hướng sau khi người dùng cuộn qua một phần tử được chỉ định (<header>):
Scrollspy & Affix
Sử dụng plugin Affix cùng với plugin Scrollspy :
Menu ngang (Thanh điều hướng)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Hãy tự mình thử »Menu dọc (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> Hãy tự mình thử »Thanh điều hướng hoạt hình trên phụ kiện
Sử dụng CSS để thao tác với các lớp .affix khác nhau:
Ví dụ - Thay đổi màu nền và phần đệm của thanh điều hướng khi cuộn
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
} Hãy tự mình thử »Ví dụ - Trượt trong thanh điều hướng
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
} Hãy tự mình thử »