Bootstrap JS Affix
JS Affix (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" tại 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 thành cố định), tùy thuộc vào vị trí cuộn.
Plugin liên kết chuyển đổi giữa ba lớp .affix:, .affix-topvà
.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 .affixlớp.
Để biết thêm thông tin, hãy đọc Hướng dẫn liên kết Bootstrap của chúng tôi .
Mẹo: Plugin Affix thường được sử dụng cùng với plugin Scrollspy .
Qua dữ liệu- * Thuộc tính
Thêm data-spy="affix"vào phần tử bạn muốn theo dõi và
thuộc tính để tính toán vị trí của cuộn.data-offset-top|bottom="number"
Thí dụ
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Qua JavaScript
Bật theo cách thủ công với:
Thí dụ
$('.nav').affix({offset: {top: 150} });
Tùy chọn liên kết
Các tùy chọn có thể được chuyển 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 nối 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 |
Sự kiện liên kết
Bảng sau liệt kê tất cả các sự kiện có sẵn.
| 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) |
|
| 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) |
|
| 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) |
|
| 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) |
|
| 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) |
|
| 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) |
Các ví dụ khác
Thanh điều hướng gắn liền
Tạo menu điều hướng được dán ngang:
Thí dụ
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
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>):
Thí dụ
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy & Affix
Sử dụng plugin Liên kết 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>
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>
Thanh điều hướng hoạt ảnh trên tem
Sử dụng CSS để thao tác 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;
}
Ví dụ - Trượt trên 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;
}