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