1. การเปลี่ยนแปลง (ตัวกรอง)
ในฐานะที่เป็นส่วนประกอบที่รองรับพื้นฐานมีการอ้างอิงหลายครั้งโดยส่วนประกอบอื่น ๆ ใช้ความสามารถในการสนับสนุนการเปลี่ยนแปลงตามเบราว์เซอร์แล้วผูกเหตุการณ์สิ้นสุดของภาพเคลื่อนไหว
ครั้งแรก: สร้างองค์ประกอบ;
จากนั้น: ภาพรวมของชื่อแอนิเมชั่นการเปลี่ยนแปลงที่สนับสนุนโดยองค์ประกอบนี้
ทักษะการใช้งานการเปลี่ยนแปลงส่วนใหญ่เป็นการเขียนวัตถุเหตุการณ์ของ jQuery ใหม่และรหัสมีดังนี้:
$ (function () {$ .support.transition = transitionend () if (! $. support.transition) ส่งคืน $ .EVENT.Special.BSTransitionend = {bindType: $ .Support.Transition.end, delegatype: $. e.handleobj.handler.apply (สิ่งนี้, อาร์กิวเมนต์)}}})2. Affix (การวางตำแหน่งลอยอัตโนมัติ)
1. เป้าหมาย: พารามิเตอร์ระบุโหนดอ้างอิงตำแหน่ง (ควรเป็นวัตถุคอนเทนเนอร์พาเรนต์ที่สร้างแถบเลื่อน) และค่าเริ่มต้นคือหน้าต่าง
2. ค่าด้านบนและด้านล่างที่กำหนดโดย data-offset จะถูกใช้เพื่อคำนวณนิพจน์เท่านั้นและจะไม่ถูกตั้งค่าเป็น CSS
3. รูปแบบการวางตำแหน่งสามประเภท:
3.1. Affix-Top: สไตล์ที่จะเพิ่มเมื่อถึงด้านบนของหน้า
3.2. Affix: สไตล์ที่จะเพิ่มในช่วงกลางของหน้า
3.3. Affix-bottom: สไตล์ที่จะเพิ่มที่ด้านล่างของหน้า
4. สูตรการประมวลผล:
4.1. ด้านบน: ความสูงของแถบม้วนของ traget (scrolltop) <ระยะทางจากตำแหน่งด้านบนขององค์ประกอบ (Oftsettop) (การตัดสินครั้งแรก)
4.1.1. Scrolltop ถูกตั้งค่าเป็น: ตำแหน่งด้านบนโดยองค์ประกอบเอง (ระยะทางจากจุดเดิมขององค์ประกอบอยู่ในตำแหน่งที่อยู่ในปัจจุบันจากเอกสาร) (ไม่ใช่ครั้งแรก)
4.2. getPinnedOffset: รับด้านบนที่ติดแถบเลื่อนเป้าหมายด้านบนขององค์ประกอบ
4.3. ด้านล่าง: หากองค์ประกอบการเกาะติดเป็นครั้งแรกที่ด้านล่างอยู่ในตำแหน่งดังนั้นด้านล่างคือความสูงของแถบเลื่อนเป้าหมาย + ความสูงขององค์ประกอบเป้าหมาย> = ความสูงของเอกสารความสูงของแถบเลื่อนทั้งหมดที่ติดอยู่กับองค์ประกอบจากด้านล่าง
4.3.1. หากไม่ใช่ครั้งแรกการวางตำแหน่งด้านล่าง
1) ถ้า Oftsettop (ระยะทางจากตำแหน่งด้านบนขององค์ประกอบ) ไม่ว่างเปล่าด้านบนของเป้าหมาย + ค่าของ getPinnedOffset> ค่าขององค์ประกอบเหนียวที่อยู่ในปัจจุบันอยู่ด้านบน
2) หาก Offsettop ว่างเปล่าด้านบนของเป้าหมาย + ความสูงขององค์ประกอบเป้าหมาย> ความสูงของความสูงเอกสารติดอยู่ด้านล่าง
4. ด้านบนเดียวที่สามารถเปลี่ยนองค์ประกอบการเกาะติดได้คือ: ความสูงของเอกสาร - ความสูงขององค์ประกอบการเกาะติด - ความสูงขององค์ประกอบการเกาะติดจากด้านล่าง
5. ที่หลุมอยู่ที่ไหน:
1) เมื่อใช้ด้านบนและด้านล่างร่วมกันความขัดแย้งจะเกิดขึ้นเหตุผล:
Affix-bottom นั่นคือเมื่อถึงด้านล่างของหน้า Bootstrap ใช้ออฟเซ็ตเพื่อตั้งค่าสูงสุดและเพิ่มตำแหน่ง: ค่าสัมพัทธ์กับองค์ประกอบซึ่งส่งผลให้ไม่มีผลเมื่อเลื่อนลงอีกครั้งหลังจากกลับไปที่ด้านบนของหน้า
เหตุผล: ชุดสัมพัทธ์ของสไตล์ในบรรทัดจะแทนที่สไตล์คงที่ที่ตั้งไว้ในชั้นเรียน
6. สรุป
1) เป็นสิ่งที่ดีในสถานการณ์สูงสุดและคุณต้องเพิ่มการควบคุมด้วยตนเองในสถานการณ์ด้านล่าง
2) เมื่อใช้การควบคุม Affix อย่างน้อยก็เขียนสไตล์ Affix ด้วยตัวเองเพื่อควบคุมตำแหน่งของแถบเหนียว
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อเรียนรู้และแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap
บทเรียนชุดนี้ได้รวบรวมไว้ใน: Bootstrap พื้นฐานการสอนหัวข้อพิเศษยินดีต้อนรับสู่การคลิกเพื่อเรียนรู้
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript