شبيبة يضعوا (affix.js)
البرنامج المساعد يضعوا يسمح عنصر لتصبح اضافته (مغلق) إلى منطقة على الصفحة. وكثيرا ما يستخدم هذا مع القوائم الملاحة أو أزرار رمز الاجتماعية، لجعلها "العصا" في منطقة معينة أثناء التمرير إلى أعلى وأسفل الصفحة.
البرنامج المساعد تبديل هذا السلوك على نحو متقطع (تغيير القيمة من الموقف المغلق من ثابت إلى ثابت)، وهذا يتوقف على موقف التمرير.
واللاحقه المساعد التبديل بين ثلاث فئات هي: .affix ، .affix-top ، و .affix-bottom . وتمثل كل فئة دولة معينة. يجب إضافة خصائص CSS للتعامل مع المواقف الفعلية، باستثناء position:fixed على .affix الطبقة.
لمزيد من المعلومات، اقرأ Bootstrap يضعوا التعليمي .
نصيحة: وغالبا ما يستخدم المساعد يضعوا معا مع Scrollspy المساعد.
عبر data-* سمات
إضافة data-spy="affix" إلى العنصر الذي تريد التجسس على، و data-offset-top|bottom=" number " سمة لحساب موقف التمرير.
مثال
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205">
انها محاولة لنفسك » عن طريق جافا سكريبت
تمكين يدويا مع:
يلصق الخيارات
يمكن أن تنتقل عن طريق الخيارات سمات البيانات أو جافا سكريبت. لسمات البيانات، إلحاق اسم الخيار لبالبيانات، كما في بيانات تعويض = "".
| اسم | اكتب | افتراضي | وصف |
|---|---|---|---|
| offset | number | object | function | 10 | يحدد عدد من بكسل للتعويض من الشاشة عند حساب موقف التمرير. عند استخدام رقم واحد، يضاف إلى كلا الاتجاهين العلوي والسفلي الإزاحة. إذا كنت ترغب فقط للسيطرة على أعلى أو أسفل، استخدم كائن، مثل offset: {top:25} لإزاحة متعددة، استخدم offset: {top:25, bottom:50} نصيحة: استخدم وظيفة لتوفير حيوي إزاحة (يمكن أن تكون مفيدة للتصاميم استجابة) |
| target | selector | node | element | the window object | تحديد العنصر المستهدف من اللاحقه |
يلصق الأحداث
يسرد الجدول التالي الأحداث اللاحقه كل ما هو متاح.
| حدث | وصف | جربها |
|---|---|---|
| affix.bs.affix | يحدث قبل إضافة المواقع ثابت إلى العنصر (على سبيل المثال، عندما .affix-top الطبقة على وشك أن يتم استبدال .affix الدرجة) | جربها |
| affixed.bs.affix | يحدث بعد إضافة المواقع ثابت إلى العنصر (على سبيل المثال، بعد .affix-top يتم استبدال الطبقة مع .affix الدرجة) | جربها |
| affix-top.bs.affix | يحدث قبل أن يعود عنصر كبير لموقفها الأصلي (غير ثابت) (على سبيل المثال، .affix الطبقة هي على وشك أن يتم استبداله مع .affix-top ) | جربها |
| affixed-top.bs.affix | يحدث بعد إرجاع عنصر كبير لموقفها الأصلي (غير ثابت) (على سبيل المثال، .affix تم استبدال الطبقة مع .affix-top ) | جربها |
| affix-bottom.bs.affix | يحدث قبل أن يعود عنصر أسفل إلى موقفها الأصلي (غير ثابت) (على سبيل المثال، .affix الطبقة هي على وشك أن يتم استبداله مع .affix-bottom ) | جربها |
| affixed-bottom.bs.affix | يحدث بعد إرجاع عنصر أسفل إلى موقفها الأصلي (غير ثابت) (على سبيل المثال، .affix تم استبدال الطبقة مع .affix-bottom ) | جربها |
أمثلة
نافبار اضافته
إنشاء الملاحة القائمة الملصقة الأفقية:
عن طريق مسج لتركيب تلقائيا نافبار
استخدام مسج ل outerHeight() طريقة لتركيب شريط تنقل بعد قيام المستخدم تمريره تمرير العنصر المحدد (<header>) :
Scrollspy ويضعوا
باستخدام يضعوا المساعد جنبا إلى جنب مع Scrollspy المساعد:
القائمة الأفقية (نافبار)
<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> انها محاولة لنفسك » الناف بار الرسوم المتحركة على اللاحقه
استخدام CSS لمعالجة مختلف .affix فئات هي:
لون الخلفية التغيير والحشو من نافبار على التمرير - مثال
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff
!important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
} انها محاولة لنفسك » المثال - الشريحة في الناف بار
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
} انها محاولة لنفسك »