15 jQuery ปลั๊กอินเพื่อสร้างองค์ประกอบที่ชาญฉลาด

เป็นเรื่องปกติที่จะเห็นองค์ประกอบบางอย่างในไซต์จับจ้องไปที่ตำแหน่งเมื่อคุณเลื่อนขึ้นหรือลงของไซต์เช่น เมนูการนำทางส่วนหัวหรือแถบข้าง สิ่งนี้ช่วยให้องค์ประกอบพร้อมใช้งานโดยไม่คำนึงถึงตำแหน่งของผู้ใช้.

เรียกว่าอิลิเมนต์เหนียวซึ่งสามารถทำได้เพียงแค่ใช้ CSS อย่างไรก็ตามการใช้วิธีนี้ทำให้เอฟเฟกต์ไม่น่าเชื่อถือในเบราว์เซอร์หลายตัว นั่นคือเหตุผลที่เราได้รวบรวมไลบรารี JS และปลั๊กอิน jQuery จำนวนหนึ่งที่จะช่วยให้คุณบรรลุการออกแบบ UX นี้โดยเฉพาะโดยไม่ยุ่งยาก.

1. จุดอ้างอิง

Waypoints เป็นไลบรารีเพื่อเรียกใช้ฟังก์ชันตามตำแหน่งองค์ประกอบในวิวพอร์ต มันมาพร้อมกับฟังก์ชั่นทางลัดที่ทำให้องค์ประกอบนั้น “เหนียว”. คุณสามารถปรับทิศทางการเลื่อนได้ - ขึ้น, ลง, และแม้กระทั่ง ขวา และ ซ้าย - ตามที่องค์ประกอบควรจะติดอยู่ภายในวิวพอร์ต.

• เมืองขึ้น: ไม่มี / jQuery (ไม่บังคับ)
• การอนุญาต: ใบอนุญาต MIT

2. ชุดเหนียว

กับ StickyKit, ไม่เพียง แต่คุณสามารถสร้างอิลิเมนต์สติ๊กภายในวิวพอร์ตได้ แต่คุณยังสามารถทำให้มันติดอยู่ในองค์ประกอบหลักที่คุณกำหนดให้กับองค์ประกอบหลายรายการพร้อมกัน ปลั๊กอินยังมาพร้อมกับการตั้งค่าขั้นสูงบางอย่างรวมถึงเหตุการณ์ที่กำหนดเองและทริกเกอร์.

• เมืองขึ้น: jQuery
• การอนุญาต: WTFPL

3. StickyJS

StickyJS เป็นปลั๊กอินเหนียว jQuery ที่ใช้งานง่ายซึ่งทำในสิ่งที่กล่าว ปลั๊กอินทำงานนอกกรอบ แต่ถ้าคุณต้องการการปรับแต่งบางอย่างมันมาพร้อมกับตัวเลือก / การตั้งค่าวิธีการกำหนดเองและกิจกรรม.

• เมืองขึ้น: jQuery
• การอนุญาต: ใบอนุญาต MIT

4. HeadRoom

ส่วนหัวของไซต์เหนียวจะใช้พื้นที่แนวตั้งที่มีค่าซึ่งสร้างความแตกต่างเมื่อคุณดูไซต์บนมือถือ. headroom เป็นไลบรารี JavaScript ที่จะทำให้ส่วนหัวเหนียวของคุณฉลาด ส่วนหัวจะถูกซ่อนเมื่อผู้ใช้เลื่อนหน้าลงและปรากฏขึ้นเมื่อเลื่อนขึ้น.

• เมืองขึ้น: ไม่มี / jQuery (เป็นทางเลือก) / เชิงมุม (เป็นทางเลือก)
• การอนุญาต: ใบอนุญาต MIT

5. MakefixedJS

Makefixed ช่วยให้คุณสร้างองค์ประกอบได้รับการแก้ไขแบบไดนามิกเมื่อผู้ใช้เลื่อนหน้า เพียงแค่โทรหา makeFixed () ฟังก์ชั่นในองค์ประกอบที่คุณต้องการแก้ไข ตรวจสอบตัวอย่างเพื่อดูการทำงาน.

• เมืองขึ้น: jQuery
• การอนุญาต: GPL

6. เที่ยงคืน JS

เที่ยงคืน อนุญาตให้คุณติดหลายส่วนหัว / องค์ประกอบและสลับระหว่างพวกเขาขึ้นอยู่กับตำแหน่งของพวกเขาภายในเอกสาร (ต้นไม้ทรี DOM) ตรวจสอบการสาธิตเพื่อดูสิ่งที่ฉันหมายถึง นอกจากนี้คุณสามารถเปลี่ยนสีได้ทันทีโดยเพิ่ม ข้อมูลเที่ยงคืน คุณลักษณะที่มีชื่อสีที่ระบุ.

• เมืองขึ้น: jQuery
• การอนุญาต: ใบอนุญาต MIT

7. ScrollMagic

ScrollMagic มีคุณสมบัติขั้นสูงเพื่อเพิ่มการโต้ตอบระหว่างการเลื่อนหน้า คุณสามารถตรึงองค์ประกอบจากตำแหน่งการเลื่อนที่เฉพาะเจาะจงเพิ่มแอนิเมชั่นตามตำแหน่งการเลื่อนหรือทำเอฟเฟ็กต์พารัลแลกซ์ที่ยอดเยี่ยม การสาธิตให้ข้อมูลเชิงลึกเกี่ยวกับสิ่งที่ปลั๊กอินนี้สามารถทำได้.

• เมืองขึ้น: jQuery / Velocity.js
• การอนุญาต: ใบอนุญาตคู่ (MIT และ GPL)

8. บนหน้าจอ

บนหน้าจอ คล้ายกับ Waypoints - ช่วยให้คุณสามารถเรียกใช้ฟังก์ชันในขณะที่องค์ประกอบกำลังเข้าออกหรือเข้าถึงตำแหน่งบางอย่างภายในวิวพอร์ตของเบราว์เซอร์.

• เมืองขึ้น: jQuery
• การอนุญาต: ใบอนุญาต MIT

9. jQuery Pin

jQuery Pin เป็นปลั๊กอิน jQuery ขนาดเล็กเพื่อ “หมุด” หรือ “เลิกตรึง” องค์ประกอบไปยังตำแหน่งเมื่อคุณเลื่อนหน้า ส่วนที่ฉันชอบที่สุดของปลั๊กอินนี้คือตัวเลือกเพื่อปิดใช้งานที่ความกว้างวิวพอร์ตที่แน่นอน.

• เมืองขึ้น: jQuery
• การอนุญาต: ใบอนุญาต BSD

10. ลอยเหนียว

ลอยเหนียว ช่วยให้เราสามารถให้องค์ประกอบตำแหน่งคงที่ที่เกี่ยวข้องกับแม่ของมัน คุณสามารถตั้งค่าตัวเลือกเหนียวตามความต้องการของคุณด้วยพารามิเตอร์ที่ให้ไว้และโดยการเปลี่ยนค่า ชมการสาธิตได้ที่นี่.

• เมืองขึ้น: jQuery
• การอนุญาต: ไม่ได้กำหนด

11. Zebra Pin

หัวม้าลาย เป็นปลั๊กอินที่มีน้ำหนักเบาในการทำองค์ประกอบขาใด ๆ ที่ภาชนะของพวกเขา ด้วยปลั๊กอินนี้คุณสามารถเพิ่ม “เหนียว-Ness” ถึงองค์ประกอบในโครงการของคุณเช่นการนำทางแถบข้างหัวกระดาษและท้ายกระดาษหรือองค์ประกอบอื่น ๆ ที่คุณต้องการให้ปรากฏเมื่อผู้ใช้เลื่อนลง ตรวจสอบตัวอย่าง.

• เมืองขึ้น: jQuery
• การอนุญาต: ใบอนุญาต GPL

12. HC-Sticky

กับ HC-เหนียว, คุณสามารถสร้างอิลิเมนต์เหนียวที่อ้างถึงคอนเทนเนอร์ของอิลิเมนต์ใด ๆ ที่กำหนดหรือเอกสารเอง ปลั๊กอินนี้มีตัวเลือกบางอย่างที่คุณสามารถปรับให้เข้ากับความต้องการของคุณเช่นระยะทางจากด้านบนและด้านล่างเพื่อเริ่มลอยและตัวเลือกอื่น ๆ.

• เมืองขึ้น: jQuery
• การอนุญาต: ใบอนุญาต MIT

13. Stickle Mojo

เหนียวโมโจ เป็นปลั๊กอิน jQuery ที่มีน้ำหนักเบารวดเร็วและยืดหยุ่นเพื่อสร้างองค์ประกอบที่น่าประทับใจ มันเข้ากันได้กับเบราว์เซอร์ที่ทันสมัยและจะลดลงอย่างสง่างามใน IE.

• เมืองขึ้น: jQuery
• การอนุญาต: ใบอนุญาต MIT

14. Sticky Navbar

หากคุณต้องการให้การนำทางหน้าเดียวซึ่งติดเมื่อเลื่อนลงหนึ่งไลบรารีนี้เหมาะสำหรับคุณ.Sticky Navbar จะวางการนำทางที่ด้านบนของหน้าต่างเบราว์เซอร์และไฮไลต์ลิงก์จุดยึดเพื่อเชื่อมต่อกับส่วนที่เกี่ยวข้องในหน้าของคุณ คุณยังสามารถเพิ่ม Animate.css เพื่อตกแต่งเอฟเฟกต์การนำทาง.

• เมืองขึ้น: jQuery
• การอนุญาต: ใบอนุญาต MIT

15. StickyStack

StickyStack จะทำให้องค์ประกอบซ้อนทับกันเมื่อผู้ใช้เลื่อนองค์ประกอบและไปถึงด้านบนของวิวพอร์ต ด้วยห้องสมุดนี้หน้ายาวของคุณจะเปลี่ยนเป็นการ์ดที่ซ้อนกัน.

• เมืองขึ้น: jQuery
• การอนุญาต: ไม่ได้กำหนด