JS ติด (affix.js)
ปลั๊กอินช่วยให้ติดเป็นองค์ประกอบที่จะกลายเป็นติด (ล็อค) ไปยังพื้นที่บนหน้าเว็บ นี้มักจะใช้กับเมนูนำทางหรือปุ่มไอคอนทางสังคมเพื่อให้พวกเขา "ติด" ที่บริเวณขณะที่เลื่อนขึ้นและลงหน้า
ปลั๊กอินสลับพฤติกรรมนี้และปิด (เปลี่ยนค่าของตำแหน่ง CSS จากคงที่คงที่) ขึ้นอยู่กับการเลื่อนตำแหน่ง
ประทับปลั๊กอินสลับระหว่างสามชั้นเรียน: .affix , .affix-top และ .affix-bottom แต่ละชั้นเป็นตัวแทนของรัฐโดยเฉพาะ คุณต้องเพิ่มคุณสมบัติ CSS เพื่อจัดการกับตำแหน่งที่เกิดขึ้นจริงมีข้อยกเว้นของ position:fixed ใน .affix ระดับ
สำหรับข้อมูลเพิ่มเติมโปรดอ่านของเรา Bootstrap ติดกวดวิชา
เคล็ดลับ: ปลั๊กอินติดมักจะใช้ร่วมกับ Scrollspy ปลั๊กอิน
ผ่าน data-* แอตทริบิวต์
เพิ่ม data-spy="affix" กับองค์ประกอบที่คุณต้องการในการสอดแนมในและ data-offset-top|bottom=" number " แอตทริบิวต์การคำนวณตำแหน่งของเลื่อน
ผ่านทางจาวาสคริปต์
เปิดใช้งานด้วยตนเอง:
ติดตัวเลือก
ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ DATA- ในขณะที่ข้อมูลชดเชย = ""
| ชื่อ | ชนิด | ค่าเริ่มต้น | ลักษณะ |
|---|---|---|---|
| offset | number | object | function | 10 | ระบุจำนวนของพิกเซลเพื่อชดเชยจากหน้าจอเมื่อคำนวณตำแหน่งของเลื่อน เมื่อใช้หมายเลขเดียวชดเชยจะถูกเพิ่มในทั้งสองทิศทางบนและด้านล่าง ถ้าคุณเพียงต้องการที่จะควบคุมด้านบนหรือด้านล่างใช้วัตถุเช่น offset: {top:25} สำหรับการชดเชยหลายรายการให้ใช้ offset: {top:25, bottom:50} เคล็ดลับ: ใช้ฟังก์ชั่นแบบไดนามิกให้ชดเชย (จะมีประโยชน์สำหรับการออกแบบที่ตอบสนองต่อ) |
| target | selector | node | element | the window object | ระบุองค์ประกอบเป้าหมายของการแนบ |
ติดเหตุการณ์
ตารางต่อไปนี้แสดงเหตุการณ์ประทับที่มีอยู่ทั้งหมด
| เหตุการณ์ | ลักษณะ | ลองมัน |
|---|---|---|
| affix.bs.affix | เกิดขึ้นก่อนที่จะวางตำแหน่งคงที่จะถูกเพิ่มองค์ประกอบ (เช่นเมื่อ .affix-top ชั้นกำลังจะถูกแทนที่ด้วย .affix class) | ลองมัน |
| affixed.bs.affix | เกิดขึ้นหลังจากการวางตำแหน่งคงที่จะถูกเพิ่มองค์ประกอบ (เช่นหลังจากที่ .affix-top ชั้นจะถูกแทนที่ด้วย .affix class) | ลองมัน |
| affix-top.bs.affix | เกิดขึ้นก่อนที่จะมีองค์ประกอบด้านบนกลับไปยังตำแหน่งเดิม (ที่ไม่คงที่) (เช่น .affix ชั้นกำลังจะถูกแทนที่ด้วย .affix-top ) | ลองมัน |
| affixed-top.bs.affix | เกิดขึ้นหลังจากที่องค์ประกอบด้านบนกลับไปยังตำแหน่งเดิม (ที่ไม่คงที่) (เช่น .affix ชั้นได้ถูกแทนที่ด้วย .affix-top ) | ลองมัน |
| affix-bottom.bs.affix | เกิดขึ้นก่อนที่จะมีองค์ประกอบด้านล่างกลับไปยังตำแหน่งเดิม (ที่ไม่คงที่) (เช่น .affix ชั้นกำลังจะถูกแทนที่ด้วย .affix-bottom ) | ลองมัน |
| affixed-bottom.bs.affix | เกิดขึ้นหลังจากที่องค์ประกอบด้านล่างกลับไปที่เดิม (ที่ไม่คงที่) ตำแหน่ง (เช่น .affix ชั้นได้ถูกแทนที่ด้วย .affix-bottom ) | ลองมัน |
ตัวอย่าง
Navbar ติด
สร้างเมนูนำทางแนวนอนติดอยู่:
ใช้ jQuery จะติดแถบนำทางโดยอัตโนมัติ
ใช้ของ jQuery outerHeight() วิธีการในการติด Navbar หลังจากที่ผู้ใช้มีการเลื่อนผ่านองค์ประกอบที่กำหนด (<header>) :
Scrollspy และติด
ใช้ติดปลั๊กอินร่วมกับ 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> ลองตัวเอง» Navbar เคลื่อนไหวบนประทับ
ใช้ 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;
} ลองตัวเอง» เช่น - สไลด์ใน Navbar
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
} ลองตัวเอง»