ปลั๊กอินนำทางเพิ่มเติม (Affix) ช่วยให้สามารถตรึง <div> ไว้ที่ไหนสักแห่งในหน้า นอกจากนี้คุณยังสามารถสลับระหว่างการเปิดหรือปิดโดยใช้ปลั๊กอิน ตัวอย่างทั่วไปคือไอคอนสังคม พวกเขาจะเริ่มต้นที่ไหนสักแห่ง แต่เมื่อหน้าคลิกบนเครื่องหมาย <div> จะล็อคอยู่ที่ไหนสักแห่งและจะไม่เลื่อนไปพร้อมกับส่วนที่เหลือของหน้า
หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิง affix.js
1. การใช้งาน
ปลั๊กอินนำทางเพิ่มเติม (Affix) สามารถใช้ผ่านคุณสมบัติข้อมูลหรือผ่าน JavaScript
1. ผ่านคุณลักษณะข้อมูล: หากคุณต้องการเพิ่มพฤติกรรมการนำทาง (Affix) เพิ่มเติมให้กับองค์ประกอบคุณจะต้องเพิ่ม data-spy = "affix" ในองค์ประกอบที่คุณต้องฟัง ใช้ออฟเซ็ตเพื่อกำหนดเมื่อสลับการล็อคและการเคลื่อนไหวขององค์ประกอบ
2. ผ่าน JavaScript: คุณสามารถเพิ่มการนำทางเพิ่มเติมไปยังองค์ประกอบผ่าน JavaScript (Affix) ด้วยตนเอง
2. การวางตำแหน่งผ่าน CSS
ในทั้งสองวิธีข้างต้นใช้ปลั๊กอิน Affix คุณต้องค้นหาเนื้อหาผ่าน CSS สวิตช์ปลั๊กอินนำทางเพิ่มเติม (Affix) ระหว่างสามคลาสแต่ละคลาสแสดงสถานะเฉพาะ: .affix, .affix-top และ. affix-bottom โปรดทำตามขั้นตอนด้านล่างเพื่อตั้งค่า CSS ของคุณเองสำหรับทั้งสามรัฐ (ไม่ต้องพึ่งพาปลั๊กอินนี้)
1. ที่จุดเริ่มต้นปลั๊กอินจะเพิ่ม. affix-top เพื่อระบุองค์ประกอบที่ตำแหน่งสูงสุด ไม่จำเป็นต้องกำหนดตำแหน่ง CSS ในเวลานี้
2. เมื่อเลื่อนผ่านองค์ประกอบที่มีการนำทางเพิ่มเติม (Affix) เพิ่มการนำทางเพิ่มเติม (Affix) ที่แท้จริงควรถูกเรียกใช้ ในเวลานี้ .Affix จะแทนที่. affix-top และตั้งตำแหน่ง: แก้ไข; (จัดทำโดยรหัส CSS ของ Bootstrap)
3. หากมีการกำหนดค่าชดเชยด้านล่างเมื่อสกรอลมาถึงตำแหน่งนี้ให้แทนที่. affix ด้วย. affix-bottom เนื่องจากออฟเซ็ตเป็นตัวเลือกหากตั้งค่าออฟเซ็ตจึงจำเป็นต้องตั้งค่า CSS ที่เหมาะสมในเวลาเดียวกัน ในกรณีนี้เพิ่มตำแหน่ง: สัมบูรณ์; หากจำเป็น
3. ตัวเลือก
มีตัวเลือกบางอย่างที่ผ่านคุณสมบัติข้อมูลหรือ JavaScript ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
iv. ตัวอย่าง
การนำทางเพิ่มเติมหมายถึงการวางไว้ที่ใดที่หนึ่งบนหน้าจอเพื่อรับฟังก์ชั่นสมอ
1. ตัวอย่างพื้นฐาน
<body data-spy = "scroll" data-target = "#myscrollspy"> <div> <div style = "ความสูง: 150px"> <h1> bootstrap affix </h1> </div> <div> <div id = "myscrollspy"> 1 </a> </li> <li> <a href = "#section-2"> ส่วนที่ 2 </a> </li> <li> <a href = "#section-3"> ตอนที่ 3 </a> </li> <li> <a href = "#section-4"> ส่วนที่ 4 </a> </li> </div> <div> <h2 id = "ส่วนที่ 1"> ส่วนที่ 1 </h2> <p> ... </p> <h2 id = "ส่วนที่ 2"> ส่วนที่ 2 </h2> <p> ... </p> <h2 id = "ส่วนที่ 3"> ส่วนที่ 3 </h2> <p> id = "Section-5"> ส่วนที่ 4 </h2> <p> ... </p> </div> </div> </div>
2. ส่วน CSS ของการนำทาง
ul.nav-pills {width: 200px;} ul.nav-pills.affix {top: 30px;} // javascript แทน data-spy = "affix" data-offset-top = "125" $ ('#myaffix')เราใช้ท็อปโดยค่าเริ่มต้นและแน่นอนว่าเราสามารถใช้ด้านล่างได้โดยค่าเริ่มต้น วิธีการวางตำแหน่งนี้อยู่ในตำแหน่งโดยตรงผ่าน CSS
// ตั้งค่าเป็น bottomul.nav-tabs.affix-bottom {bottom: 30px;} // ตั้งค่าเป็น $ ด้านล่าง ('#myaffix'). affix ({ออฟเซ็ต: {bottom: 150}})Affix มีหลายเหตุการณ์ดังนี้:
// อื่น ๆ ที่คล้ายกัน $ ('#myaffix') on ('ติดอยู่กับ .b.bs.affix', function () {การแจ้งเตือน ('ทริกเกอร์!');});หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน