Bootstrap JS Affix
JS ต่อ (affix.js)
ปลั๊กอิน Affix ช่วยให้องค์ประกอบสามารถติด (ล็อค) กับพื้นที่บนหน้าได้ มักใช้กับเมนูการนำทางหรือปุ่มไอคอนโซเชียล เพื่อให้ "ติด" ที่บริเวณใดบริเวณหนึ่งขณะเลื่อนหน้าขึ้นและลง
ปลั๊กอินเปิดปิดการทำงานนี้ (เปลี่ยนค่าตำแหน่ง CSS จากคงที่เป็นคงที่) ขึ้นอยู่กับตำแหน่งการเลื่อน
ปลั๊กอินเสริมจะสลับระหว่างสามคลาส: .affix, , .affix-topและ
.affix-bottomแต่ละชั้นแสดงถึงสถานะเฉพาะ คุณต้องเพิ่มคุณสมบัติ CSS เพื่อจัดการตำแหน่งจริง ยกเว้นposition:fixed
ใน.affixคลาส
สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทแนะนำเกี่ยวกับBootstrap Affix
เคล็ดลับ:ปลั๊กอิน Affix มักใช้ร่วมกับ ปลั๊กอินScrollspy
ผ่าน data-* คุณสมบัติ
เพิ่มdata-spy="affix"ไปยังองค์ประกอบที่คุณต้องการสอดแนมและ
แอตทริบิวต์เพื่อคำนวณตำแหน่งของการเลื่อนdata-offset-top|bottom="number"
ตัวอย่าง
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
ผ่าน JavaScript
เปิดใช้งานด้วยตนเองด้วย:
ตัวอย่าง
$('.nav').affix({offset: {top: 150} });
ติดตัวเลือก
ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูล ผนวกชื่อตัวเลือกกับ data- เช่นเดียวกับใน 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 |
ติดเหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์การต่อท้ายที่มีอยู่ทั้งหมด
| 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) |
ตัวอย่างเพิ่มเติม
ติดแถบนำทาง
สร้างเมนูนำทางติดแนวนอน:
ตัวอย่าง
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
ใช้ jQuery เพื่อติด navbar . โดยอัตโนมัติ
ใช้ วิธี outerHeight() ของ jQuery เพื่อติด navbar หลังจากที่ผู้ใช้เลื่อนผ่านองค์ประกอบที่ระบุ (<header>):
ตัวอย่าง
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy & ต่อท้าย
การใช้ปลั๊กอิน Affix ร่วมกับ ปลั๊กอิน Scrollspy :
เมนูแนวนอน (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
เมนูแนวตั้ง (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>
แถบนำทางเคลื่อนไหวบน affix
ใช้ CSS เพื่อจัดการคลาส .affix ที่แตกต่างกัน:
ตัวอย่าง - เปลี่ยนสีพื้นหลังและช่องว่างภายในของแถบนำทางบนแถบเลื่อน
.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;
}
ตัวอย่าง - เลื่อนในแถบนำทาง
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}