Bootstrap Affix Plugin (متقدم)
الملحق الملحق
يتيح المكون الإضافي Affix لعنصر أن يتم إلصاقه (مقفلًا) في منطقة على الصفحة. غالبًا ما يستخدم هذا مع قوائم التنقل أو أزرار الرموز الاجتماعية ، لجعلها "ثابتة" في منطقة معينة أثناء التمرير لأعلى ولأسفل الصفحة.
يقوم المكون الإضافي بتبديل هذا السلوك وإيقاف تشغيله (يغير قيمة
CSS positionمن staticإلى fixed) ، اعتمادًا على موضع التمرير.
مثال 1) شريط التنقل الملصق:
مثال 2) شريط جانبي مثبت:
باستخدام Affix ، عندما نقوم بالتمرير لأعلى ولأسفل الصفحة ، تكون القائمة مرئية دائمًا ومثبتة في موضعها.
كيفية إنشاء قائمة ملاحة مثبتة
يوضح المثال التالي كيفية إنشاء قائمة تنقل أفقية مثبتة:
مثال
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
يوضح المثال التالي كيفية إنشاء قائمة تنقل رأسية مثبتة:
مثال
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
شرح المثال
أضف data-spy="affix"إلى العنصر الذي تريد إلصاقه.
اختياريًا ، أضف data-offset-top|bottomالسمة لحساب موضع التمرير.
كيف تعمل
يبدل الملحق الإضافي بين ثلاث فئات: .affixو .affix-topو و
.affix-bottom. كل فئة تمثل دولة معينة. يجب عليك إضافة خصائص CSS للتعامل مع المواضع الفعلية ، باستثناء position:fixed
في .affixالفئة.
- يضيف المكون الإضافي
.affix-topأو.affix-bottomclass للإشارة إلى أن العنصر في موضعه العلوي أو السفلي. تحديد المواقع باستخدام CSS غير مطلوب في هذه المرحلة. - يؤدي التمرير إلى ما بعد العنصر الملصق إلى تشغيل الإلصاق الفعلي - هذا هو المكان الذي يستبدل فيه المكون الإضافي
.affix-topأو.affix-bottomالفئة.affixبالفئة (المجموعاتposition:fixed). في هذه المرحلة ، يجب عليك إضافة CSStopأوbottomالخاصية لوضع العنصر الملصق في الصفحة. - إذا تم تحديد الإزاحة السفلية ، فإن التمرير بعد ذلك يستبدل
.affixالفئة بـ.affix-bottom. نظرًا لأن عمليات الإزاحة اختيارية ، فإن الإعداد يتطلب منك تعيين CSS المناسب. في هذه الحالة ، قم بالإضافةposition:absoluteعند الضرورة.
في المثال الأول أعلاه ، يضيف المكون الإضافي Affix .affixالفئة (الموضع: ثابت) إلى عنصر <nav> عندما نقوم بالتمرير 197 بكسل من الأعلى. إذا فتحت المثال ، فسترى أيضًا أننا أضفنا topخاصية CSS بقيمة 0 إلى .affixالفصل. هذا للتأكد من بقاء شريط التنقل في أعلى الصفحة طوال الوقت ، عندما نقوم بالتمرير 197 بكسل من الأعلى.
Scrollspy & Affix
استخدام ملحق Affix مع البرنامج المساعد Scrollspy :
قائمة أفقية (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
القائمة العمودية (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
استكمال مرجع ملحق Bootstrap
للحصول على مرجع كامل لجميع طرق وأحداث اللاحقات ، انتقل إلى مرجع Bootstrap JS Affix .