15 الإضافات مسج لجعل عناصر لزجة الذكية
من الشائع الآن رؤية عناصر معينة في موقع ما مثبتة في موضع ما عند التمرير لأعلى أو لأسفل على سبيل المثال قائمة التنقل أو الرأس أو الشريط الجانبي. هذا يسمح للعنصر لتكون متاحة بسهولة بغض النظر عن موقف المستخدم.
يطلق عليه عنصر لزج ، ويمكن تحقيق ذلك فقط باستخدام CSS ، ومع ذلك ، باستخدام هذا الأسلوب ، فإن التأثير غير موثوق به عبر متصفحات متعددة. لهذا السبب قمنا بتجميع حفنة من مكتبات JS وإضافات jQuery التي ستتيح لك تحقيق تصميم UX المعين هذا دون أي متاعب تذكر.
1. نقاط الطريق
نقاط الطريق هي مكتبة لتنفيذ وظيفة بناءً على موضع العنصر في إطار العرض. لأنه يأتي مع وظيفة الاختصار التي تجعل هذا العنصر “لزج”. يمكنك تخصيص اتجاه التمرير - فوق, أسفل, و حتى حق و اليسار - بالنسبة للعنصر الذي يجب أن يلتصق داخل إطار العرض.
- الاعتماد: بلا / مسج (اختياري)
- رخصة: رخصة معهد ماساتشوستس للتكنولوجيا
2. مثبت عدة
مع StickyKit, لا يمكنك فقط إنشاء عصا عنصر داخل إطار العرض ، ولكن يمكنك أيضًا جعلها تلتصق داخل العنصر الأصل الذي تحدده لعناصر متعددة في وقت واحد. يأتي الملحق أيضًا مع بعض الإعدادات المتقدمة بما في ذلك الأحداث والمشغلات المخصصة.
- الاعتماد: مسج
- رخصة: WTFPL
3. StickyJS
StickyJS هو البرنامج المساعد لزجة jQuery سهلة الاستخدام الذي يفعل ما يقول. البرنامج المساعد يعمل من خارج منطقة الجزاء. ومع ذلك ، إذا كنت بحاجة إلى بعض التخصيص ، فهو يأتي مع خيارات / إعدادات وأساليب وأحداث مخصصة.
- الاعتماد: مسج
- رخصة: رخصة معهد ماساتشوستس للتكنولوجيا
4. HeadRoom
سيشغل رأس الموقع اللاصق مساحة رأسية قيمة تحدث فرقًا عند عرض الموقع على الهاتف المحمول. الإرتفاع هي مكتبة JavaScript من شأنها أن تجعل رأسك اللاصق ذكيًا ؛ سيتم إخفاء الرأس عندما يقوم المستخدمون بالتمرير لأسفل الصفحة وتظهر عند التمرير لأعلى.
- الاعتماد: بلا / مسج (اختياري) / الزاوي (اختياري)
- رخصة: رخصة معهد ماساتشوستس للتكنولوجيا
5. MakefixedJS
Makefixed يتيح لك جعل العناصر ثابتة بشكل ديناميكي أثناء قيام المستخدمين بالتمرير في الصفحة. فقط اتصل على makeFixed () تعمل على العنصر الذي تريده ثابت. تحقق التجريبي لرؤيتها على العمل.
- الاعتماد: مسج
- رخصة: GPL
6. MidnightJS
منتصف الليل يتيح لك التمسك برؤوس / عناصر متعددة والتبديل بينها بناءً على موضعها داخل المستند (شجرة DOM) ، راجع العرض التوضيحي لمعرفة ما أقصده. بالإضافة إلى ذلك يمكنك تغيير لونها على الطاير ببساطة عن طريق إضافة بيانات منتصف الليل السمة مع اسم اللون المحدد.
- الاعتماد: مسج
- رخصة: رخصة معهد ماساتشوستس للتكنولوجيا
7. ScrollMagic
ScrollMagic لديه ميزات متقدمة لإضافة التفاعل ، خلال التمرير الصفحة. يمكنك تثبيت عناصر من مواضع تمرير محددة ، أو إضافة رسوم متحركة بناءً على موضع التمرير ، أو حتى جعل تأثير المنظر رائعًا. يمنحك العرض التوضيحي بعض الأفكار حول ما يمكن أن يفعله هذا البرنامج المساعد.
- الاعتماد: jQuery / Velocity.js
- رخصة: ترخيص مزدوج (MIT و GPL)
8. على الشاشة
على الشاشة يشبه نقاط الطريق - فهو يسمح لك بتنفيذ الوظائف حيث يدخل العنصر أو يغادر أو يصل إلى مواقع معينة داخل منفذ عرض المتصفح.
- الاعتماد: مسج
- رخصة: رخصة معهد ماساتشوستس للتكنولوجيا
9. مسج دبوس
مسج دبوس هو المساعد jQuery صغير ل “دبوس” أو “نزع الدبوس” العناصر إلى الموضع ، عند التمرير الصفحة. الجزء الأكثر تفضيلاً من هذا المكون الإضافي هو الخيار لتعطيله عند عرض منفذ معين.
- الاعتماد: مسج
- رخصة: رخصة BSD
10. تعويم مثبت
تعويم مثبت يتيح لنا إعطاء العناصر موقعًا ثابتًا بالنسبة إلى الأصل. يمكنك ضبط الخيار اللاصق وفقًا لاحتياجاتك باستخدام المعلمات المقدمة وتغيير القيمة. قبض على العرض التوضيحي هنا.
- الاعتماد: مسج
- رخصة: غير محدد
11. حمار وحشي دبوس
حمار وحشي دبوس هو البرنامج المساعد خفيفة الوزن لجعل أي دبوس عنصر في الحاوية الخاصة بهم. مع هذا البرنامج المساعد يمكنك إضافة “لزجة نيس” إلى العناصر في مشروعك مثل التنقل أو الأشرطة الجانبية أو الرؤوس والتذييلات أو العناصر الأخرى التي ترغب في إبقائها مرئية عند التمرير لأسفل. تحقق من التجريبي.
- الاعتماد: مسج
- رخصة: رخصة GPL
12. HC- مثبت
مع HC-مثبت, يمكنك إنشاء عناصر لزجة تشير إلى الحاوية الخاصة بها أو إلى أي عنصر محدد أو إلى المستند نفسه. يحتوي هذا البرنامج المساعد على بعض الخيارات التي يمكنك ضبطها حسب حاجتك ، مثل المسافة من الأعلى والأسفل لبدء العائمة ، وخيارات أخرى.
- الاعتماد: مسج
- رخصة: رخصة معهد ماساتشوستس للتكنولوجيا
13. لزجة موجو
لزجة موجو هو البرنامج المساعد jQuery خفيفة الوزن وسريعة ومرنة لجعل عناصر لزجة رهيبة. انها متوافقة مع المتصفحات الحديثة وسوف تتحلل برشاقة في IE.
- الاعتماد: مسج
- رخصة: رخصة معهد ماساتشوستس للتكنولوجيا
14. مثبت نافبار
إذا كنت ترغب في جعل التنقل في صفحة واحدة يتمسك عند التمرير لأسفل ، فهذه المكتبة تناسبك.شريط التنقل سيضع التنقل في الجزء العلوي من نافذة المتصفح ويسلط الضوء على رابط المرساة للاتصال بالقسم المقابل في صفحتك. يمكنك أيضًا إضافة Animate.css لتجميل تأثير التنقل.
- الاعتماد: مسج
- رخصة: رخصة معهد ماساتشوستس للتكنولوجيا
15. StickyStack
StickyStack ستجعل العناصر تتكدس مع عنصر آخر عندما يقوم المستخدمون بتمرير العنصر والوصول إلى الجزء العلوي من إطار العرض. باستخدام هذه المكتبة ، ستتحول صفحتك الطويلة إلى بطاقات مكدسة.
- الاعتماد: مسج
- رخصة: غير محدد
