يتيح المكون الإضافي للملاحة (Affix) الإضافية تثبيت <Div> في مكان ما على الصفحة. يمكنك أيضًا التبديل بين التشغيل أو إيقاف تشغيله باستخدام البرنامج المساعد. مثال شائع هو الرموز الاجتماعية. سيبدأون في مكان ما ، ولكن عندما تنقر الصفحة على علامة ، ستنقل <Div> في مكان ما ولن يتم التمرير مع بقية الصفحة.
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى Affix.js.
1. الاستخدام
يمكن استخدام المكونات الإضافية الإضافية للتنقل (Affix) من خلال خصائص البيانات أو من خلال JavaScript.
1. من خلال سمات البيانات: إذا كنت بحاجة إلى إضافة سلوك إضافي للتنقل (Affix) إلى العنصر ، فأنت بحاجة فقط إلى إضافة Data-Spy = "Affix" إلى العنصر الذي تحتاجه إلى الاستماع إليه. استخدم الإزاحة لتحديد وقت قفل العناصر والحركة.
2. من خلال JavaScript: يمكنك إضافة تنقل إضافي يدويًا إلى عنصر من خلال JavaScript (Affix)
2. تحديد المواقع من خلال CSS
في كلتا الطريقتين المذكورة أعلاه لاستخدام المكون الإضافي لـ Affix ، يجب عليك تحديد موقع المحتوى عبر CSS. يتم تبديل المكونات الإضافية الإضافية للتنقل (Affix) بين ثلاث فئات ، كل منها يقدم حالة محددة: .affix و .affix-top و .affix-bottom. يرجى اتباع الخطوات أدناه لإعداد CSS الخاص بك لهذه الحالات الثلاث (لا تعتمد على هذا البرنامج المساعد).
1. في البداية ، يضيف المكون الإضافي .fix-top للإشارة إلى العنصر في وضعه الأعلى. لا يلزم تحديد موقع CSS في هذا الوقت.
2. عند التمرير عبر العناصر ذات الملاحة الإضافية (Affix) المضافة ، يجب تشغيل التنقل الإضافي الفعلي (Affix). في هذا الوقت ، سوف يحل .affix محل. (المقدمة بواسطة رمز CSS في Bootstrap).
3. إذا تم تعريف الإزاحة السفلية ، عندما يصل التمرير إلى هذا الموضع ، استبدل .affix باستخدام .affix-bottom. نظرًا لأن الإزاحة اختيارية ، إذا تم تعيين الإزاحة ، فيجب تعيين CSS المناسب في نفس الوقت. في هذه الحالة ، أضف الموقف: مطلق ؛ إذا لزم الأمر.
3. الخيارات
هناك بعض الخيارات التي يتم تمريرها من خلال خصائص البيانات أو JavaScript. يسرد الجدول التالي هذه الخيارات:
رابعا. أمثلة
التنقل الإضافي يعني لصقها في مكان ما على الشاشة لتحقيق وظيفة المرساة.
1. أمثلة أساسية
<body data-spy = "scroll" data-arget = "#myscrollspy"> <viv> <div style = "height: 150px"> <h1> bootstrap appix </h1> </viv> <viv> <div id = "myscrollspy"> <ul data-spy = "data". </li> <li> <a href = "#section-2"> الجزء 2 </a> </li> <li> <a href = "#section-3"> الجزء 3 </a> </li> <li> <a href = "#section-4"> الجزء 4 </a> <h2 id = "section-1"> الجزء 1 </h2> <p> ... </p> <h2 id = "section-2"> الجزء 2 </h2> <p> ... </p> <h2 id = "section-3"> الجزء 3 </h2> <p> ... </p> <h2 id = "section-4"> part 4 </h2> 4 </h2> <p> ... </p> </viv> </viv> </viv>
2. جزء CSS من الملاحة
ul.nav-pills {width: 200px ؛} ul.nav-pills.affix {top: 30px ؛} // javaScript بدلاً من data-spy = "appix" data-top = "125" $ ('#myaffix'). apfix ({ourfset: {top: 150}})نستخدم TOP بشكل افتراضي ، وبالطبع يمكننا أيضًا استخدام القاع بشكل افتراضي. يتم وضع طريقة تحديد المواقع هذه مباشرة من خلال CSS.
// ضبط على Bettlul.nav-tabs.affix-bottom {Bottom: 30px ؛} // ضبط على القاع $ ('#myaffix').تحتوي Affix على العديد من الأحداث ، على النحو التالي:
// أخرى مماثلة $ ('#myaffix'). on ('unfixed-top.bs.affix' ، function () {Alert ('trigger!') ؛}) ؛إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل 3 موضوعات مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.