Affix เป็นตัวควบคุมที่มีประโยชน์ใน bootstrap ซึ่งสามารถตรวจสอบตำแหน่งของแถบเลื่อนของเบราว์เซอร์และเก็บการนำทางของคุณไว้ในพื้นที่ที่มองเห็นได้ของหน้าตลอดเวลา ในตอนแรกการนำทางเป็นรูปแบบการสตรีมปกติในหน้าเว็บครอบครองตำแหน่งคงที่ในเอกสาร เมื่อหน้าเลื่อนหน้าการนำทางจะกลายเป็นเค้าโครงคงที่ (คงที่) โดยอัตโนมัติในพื้นที่ดูของผู้ใช้เสมอ มาพูดถึงการใช้งานกันเถอะ ก่อนอื่นมาดูหลักการดำเนินการ ทำได้โดยการปรับเปลี่ยนแอตทริบิวต์คลาสขององค์ประกอบหน้าแบบเรียลไทม์
ในตอนแรกแอตทริบิวต์ Affxi-top จะถูกเพิ่มโดยอัตโนมัติในคลาสขององค์ประกอบที่ใช้ Affix
เมื่อแถบเลื่อนเลื่อนเพื่อให้การนำทางกำลังจะไปถึงด้านบนของหน้าเว็บ Affix-top จะถูกเปลี่ยนเป็น Affix ในชั้นเรียนขององค์ประกอบ
เมื่อลากแถบเลื่อนไปที่ด้านล่างของหน้า Affix จะเปลี่ยนเป็น affix-bottom โดยอัตโนมัติอีกครั้ง
กระบวนการข้างต้นถูกนำไปใช้อย่างสมบูรณ์โดยตัวควบคุมเองและเราไม่จำเป็นต้องแทรกแซง เราแค่ต้องเขียน CSS ในรัฐเหล่านี้
ถ้าเราสามารถตั้งค่าได้
.affix-top {top: 150px;}. affix {top: 20px; // เว็บไซต์มักจะสร้างด้วย bootstrap มีแถบนำทางที่หัว} .affix-bottom {…}ลองมาดูกันว่ามันใช้งานอย่างไร
1. ผ่านแอตทริบิวต์ข้อมูล
คุณเพียงแค่ต้องเพิ่ม data-spy = "affix" ในองค์ประกอบหน้าคุณต้องฟัง จากนั้นใช้ออฟเซ็ตเพื่อกำหนดและปิดองค์ประกอบ
<ul data-spy = "affix" data-offset-top = "190"> <li> <a href = "#one"> การสอนหนึ่ง </a> </li> <li> <a href = "#สอง"> การสอนสอง </a> </li> <li>
โดยที่ data-offset-top เป็นตำแหน่งที่องค์ประกอบสถานะ Affix-top อยู่จากด้านบนของหน้า เมื่อเลื่อนไปที่ด้านบนของหน้าเราสามารถตั้งค่าสไตล์ ".Affix" เพื่อรีเซ็ตค่า "ด้านบน"
2. การเรียกผ่าน JavaScript
รหัสตัวอย่างมีดังนี้:
$ ('#mynav'). affix ({ออฟเซ็ต: {top: 100, // ตำแหน่งจากด้านบนของหน้าในการเลื่อนเป็นด้านล่าง: function () {// ตำแหน่งจากด้านล่างของหน้าเมื่อการเลื่อนเสร็จสมบูรณ์ (this.bottom = $ ('. bs-footer')รหัส HTML มีดังนี้ (เฉพาะรหัสหลักจะปรากฏขึ้น):
<ul id = "mynav"> <li> <a href = "#one"> การสอนหนึ่ง </a> </li> <li> <a href = "#สอง"> การสอนสอง </a> </li> <li> <a href = "#สาม"> การสอนสาม </a> </li>
ดูเหมือนว่าข้างต้นจะแนะนำการใช้ Affix ใน bootstrap แต่ในกระบวนการใช้งานจริงเราจะพบว่าเมื่อลากแถบเลื่อนความกว้างขององค์ประกอบหน้าโดยใช้ Affix จะเปลี่ยนไป ดังนั้นจึงเป็นการดีที่สุดที่จะเขียนความกว้างใน CSS ที่กำหนด ADMING เช่น:
.Affix {Width: 250px;}ด้วยวิธีนี้ไม่มีปัญหาเมื่อหน้าต่างมีขนาดใหญ่พอ แต่เมื่อคุณลากและเปลี่ยนขนาดของหน้าต่างคุณจะพบว่าเลย์เอาต์จะยุ่งเหยิงอีกครั้ง ปัญหานี้ทำให้ฉันลำบากมานาน ในที่สุดโดยการวิเคราะห์ซอร์สโค้ดของ bootcss ฉันพบว่าเว็บไซต์ได้เพิ่ม "Hidden-Print", "Hidden-Xs", "Hidden-SM" แอตทริบิวต์ในคลาสทั้งหมดที่ใช้องค์ประกอบ Affix มันถูกใช้เพื่อซ่อน Affix เมื่อหน้าจอไม่เป็นไปตามข้อกำหนด แม้ว่ามันจะส่งผลกระทบต่อความสะดวกในการใช้งาน แต่ก็ช่วยให้มั่นใจได้ว่าเค้าโครงนั้นเรียบร้อยในทุกกรณี
ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับการใช้การควบคุม Affix ใน bootstrap และวิธีการรักษาเค้าโครงที่สวยงาม ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!