تعد Affix عنصر تحكم مفيد في Bootstrap ، والتي يمكنها مراقبة موضع شريط التمرير للمتصفح والحفاظ على التنقل في المنطقة المرئية للصفحة في جميع الأوقات. في البداية ، كان التنقل عبارة عن تخطيط متدفق عادي في الصفحة ، حيث احتل موقعًا ثابتًا في المستند. عندما تم تمرير الصفحة ، أصبح التنقل تلقائيًا تخطيطًا ثابتًا (ثابتًا) ، دائمًا في منطقة عرض المستخدم. لنتحدث عن استخدامه. أولاً ، دعونا نلقي نظرة على مبدأ التنفيذ. يتم تحقيقه عن طريق تعديل سمات الفصل لعناصر الصفحة في الوقت الفعلي
في البداية ، سيتم إضافة سمة AFFXI-Top تلقائيًا إلى فئة العنصر الذي ينطبق على Affix.
عندما يتم تمريرات شريط التمرير بحيث يكون التنقل على وشك الوصول إلى الجزء العلوي من الصفحة ، سيتم تغيير قمة اللصفة إلى اللصوص في فئة العنصر.
عند سحب شريط التمرير إلى أسفل الصفحة ، ستتغير Affix تلقائيًا إلى القاع
يتم تنفيذ العملية أعلاه بالكامل من خلال التحكم نفسه ، ولا نحتاج إلى التدخل. نحن فقط بحاجة إلى كتابة CSS في هذه الحالات.
إذا استطعنا ضبط
.affix-top {top: 150px ؛}.لنلقي نظرة على كيفية استخدامه
1. تمرير سمة البيانات
تحتاج فقط إلى إضافة Data-spy = "Affix" إلى عنصر الصفحة الذي تحتاج إلى الاستماع إليه. ثم استخدم التعويضات لتحديد ON وخارج عنصر ما.
<ul data-spy = "Affix" data-top = "190"> <li> <a href = "#One"> Tutorial One </a> </li> <li> <a href = "#two"> Tutorial two </a> </li> <li>
حيث يكون ارتفاع بيانات البيانات هو الموضع الذي يقع فيه عنصر الحالة القمة من أعلى الصفحة. عند التمرير إلى أعلى الصفحة ، يمكننا تعيين نمط ".affix" لإعادة تعيين قيمة "أعلى".
2. الدعوة من خلال جافا سكريبت
رمز العينة كما يلي:
$ ('#mynav'). Affix ({Offset: {TOP: 100 ، // الموضع من أعلى الصفحة في التمرير هو القاع: function () {// الموضع من أسفل الصفحة عند إكمال التمرير (this.bottom = $ ('.رمز HTML كما يلي (يتم عرض الرمز الأساسي فقط):
<ul id = "mynav"> <li> <a href = "#one"> Tutorial One </a> </li> <li> <a href = "#two"> two </a> </li> <li> <a href = "#three"> tutorial three </a> </li> </ul> ... <div>
يبدو أن ما سبق قد أدخل استخدام Affix في Bootstrap ، ولكن في عملية الاستخدام الفعلي ، سنجد أنه عند سحب شريط التمرير ، سيتغير عرض عناصر الصفحة باستخدام Affix ، مما يؤدي إلى تخطيط الصفحة الفوضوي. لذلك ، من الأفضل تدوين عرضه في CSS الذي يحدد اللصوص ، مثل:
.affix {العرض: 250px ؛}وبهذه الطريقة ، لا توجد مشكلة عندما تكون النافذة كبيرة بما يكفي ، ولكن عندما تسحب وتغيير حجم النافذة ، ستجد أن التصميم قد أفسد مرة أخرى. هذه المشكلة قد أزعجتني لفترة طويلة. أخيرًا ، من خلال تحليل الكود المصدري لـ BOOTCSS ، وجدت أن الموقع أضاف "طباعة مخفية" ، "Hidden-XS" ، "Hidden-SM" إلى جميع الفئات التي تستخدم عناصر Affix. يتم استخدامه لإخفاء اللصفة عندما لا تفي الشاشة بالمتطلبات. على الرغم من أنه يؤثر على سهولة الاستخدام ، إلا أنه يضمن أن يكون التصميم أنيقًا في أي حال.
ما سبق هو شرح مفصل لاستخدام عناصر التحكم في اللصوص في bootstrap والطريقة للحفاظ على التصميم الجميل. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!