ปลั๊กอินติด
ปลั๊กอินช่วยให้ติดเป็นองค์ประกอบที่จะกลายเป็นติด (ล็อค) ไปยังพื้นที่บนหน้าเว็บ นี้มักจะใช้กับเมนูนำทางหรือปุ่มไอคอนทางสังคมเพื่อให้พวกเขา "stick" ที่บริเวณขณะที่เลื่อนขึ้นและลงหน้า
ปลั๊กอินสลับพฤติกรรมนี้และปิด (เปลี่ยนค่าของตำแหน่ง CSS จากคงที่คงที่) ขึ้นอยู่กับการเลื่อนตำแหน่ง
ตัวอย่างเช่น 1) แถบนำทางติดอยู่:
ตัวอย่าง 2) แถบด้านข้างติดอยู่:
ด้วยการติดเมื่อเราเลื่อนขึ้นและลงหน้าเมนูอยู่เสมอที่มองเห็นและถูกขังอยู่ในตำแหน่ง
วิธีการสร้างเมนูติดนำร่อง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างเมนูนำทางแนวนอนติดอยู่:
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างเมนูนำทางแนวตั้งติดอยู่:
ตัวอย่างอธิบาย
เพิ่ม data-spy="affix" กับองค์ประกอบที่คุณต้องการติด
เลือกเพิ่ม data-offset-top|bottom แอตทริบิวต์การคำนวณตำแหน่งของเลื่อน
มันทำงานอย่างไร
ประทับปลั๊กอินสลับระหว่างสามชั้นเรียน: .affix , .affix-top และ .affix-bottom แต่ละชั้นเป็นตัวแทนของรัฐโดยเฉพาะ คุณต้องเพิ่มคุณสมบัติ CSS เพื่อจัดการกับตำแหน่งที่เกิดขึ้นจริงมีข้อยกเว้นของ position:fixed ใน .affix ระดับ
- ปลั๊กอินเพิ่ม
.affix-topหรือ.affix-bottomชั้นเพื่อบ่งชี้องค์ประกอบอยู่ในบนสุดหรือล่างสุดตำแหน่ง การวางตำแหน่งด้วย CSS ไม่จำเป็นต้องที่จุดนี้ - เลื่อนที่ผ่านมาก่อให้เกิดองค์ประกอบที่ติดพิมพ์ตัวหนังสือลงจริง - นี่คือที่ปลั๊กอินแทนที่
.affix-topหรือ.affix-bottomชั้นกับ.affixระดับ (ชุดposition:fixed) ณ จุดนี้คุณต้องเพิ่ม CSStopหรือbottomคุณสมบัติการวางตำแหน่งขององค์ประกอบที่ติดอยู่ในหน้า - ถ้าด้านล่างชดเชยที่ถูกกำหนดให้เลื่อนที่ผ่านมาแทนที่
.affixชั้นเรียนกับ.affix-bottomตั้งแต่การชดเชยเป็นตัวเลือกการตั้งค่าหนึ่งที่คุณต้องมีการตั้งค่าที่เหมาะสม CSS ในกรณีนี้เพิ่มposition:absoluteเมื่อมีความจำเป็น
ในตัวอย่างแรกข้างต้น, ปลั๊กอินติดเพิ่ม .affix ระดับ (ตำแหน่ง: คงที่) ไป <nav> องค์ประกอบเมื่อเราได้เลื่อน 197 พิกเซลจากด้านบน ถ้าคุณเปิดตัวอย่างคุณยังจะเห็นว่าเราได้เพิ่มแบบ CSS top ทรัพย์สินที่มีค่าเป็น 0 ไป .affix ระดับ นี้คือการทำให้แน่ใจว่า Navbar อยู่ที่ด้านบนของหน้าตลอดเวลาเมื่อเราได้เลื่อน 197 พิกเซลจากด้านบน
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> ลองตัวเอง» กรอก Bootstrap ติดอ้างอิง
สำหรับการอ้างอิงที่สมบูรณ์ของทุกวิธีการและเหตุการณ์ติดไปที่เรา Bootstrap JS ติดอ้างอิง