JS Ekler (affix.js)
Ekler eklentisi unsuru yapıştırılmış olmayı sağlar (locked) sayfasında bir alana. Bu genellikle onları yapmak için, navigasyon menüler veya sosyal simge butonları ile kullanılır "stick" yukarı kaydırma yaparken belirli bir alanda ve sayfaya yerleştirilir.
Eklenti ve kapalı bu davranışı değiştirir (changes the value of CSS position from static to fixed) kaydırma konumuna bağlı olarak,.
: Üç sınıf arasında geçiş yapar eklentisi Eklerin .affix , .affix-top ve .affix-bottom . Her sınıf belirli bir durumunu temsil eder. Sen hariç, fiili pozisyonları işlemek için CSS özelliklerini eklemelisiniz position:fixed üzerine .affix sınıfına.
Daha fazla bilgi için lütfen okuyunuz Bootstrap Ekler Eğitimi .
İpucu: Ekler eklentisi genellikle ile birlikte kullanılır Scrollspy eklentisi.
Via data-* Özellikler
Ekle data-spy="affix" Eğer casusluk istediğiniz öğeye ve data-offset-top|bottom=" number " nitelik kaydırma konumunu hesaplamak için.
JavaScript aracılığıyla
el ile etkinleştirme:
Seçenek yapıştırın
Seçenekler Veri özellikleri veya JavaScript aracılığıyla geçirilebilir. veri özelliklerini için, olduğu gibi, veriye seçeneği adını ekler = "" data-ofset.
| isim | tip | Varsayılan | Açıklama |
|---|---|---|---|
| offset | number | object | function | 10 | kaydırma konumu hesaplanırken ekrandan dengelemek için piksel sayısını belirtir. tek bir numara kullanırken, hem üst hem de alt yönleri eklenir ofset. Yalnızca üst veya alt kısmını kontrol etmek istiyorsanız gibi, bir nesneyi kullanmak offset: {top:25} Birden uzaklıklar için kullanmak offset: {top:25, bottom:50} İpucu: Dinamik olarak sağlamak için bir işlevi kullanın bir ofset (can be useful for responsive designs) |
| target | selector | node | element | the window object | ekiyle hedef elemanını belirtir |
Olaylar yapıştırın
Aşağıdaki tabloda mevcut tüm Eklerin olaylarını listeler.
| Olay | Açıklama | Dene |
|---|---|---|
| affix.bs.affix | Sabit konumlandırma elemanına ilave edilmeden önce gerçekleşir (örneğin, zaman .affix-top sınıfı ile değiştirilmesi ile ilgili olan .affix sınıfı) | Dene |
| affixed.bs.affix | Sabit konumlandırma elemanına ilave edildikten sonra meydana gelir (örneğin, sonra .affix-top sınıfı ile değiştirildiği .affix sınıfı) | Dene |
| affix-top.bs.affix | Üst elemanın orijinal dönmeden önce oluşur (non-fixed) konumunda (örneğin, .affix sınıfı ile değiştirilmesi ile ilgilidir .affix-top ) | Dene |
| affixed-top.bs.affix | Üst elemanın orijinal döner sonra oluşan (non-fixed) konumunda (örneğin, .affix sınıfı ile değiştirilmiştir .affix-top ) | Dene |
| affix-bottom.bs.affix | Taban elemanı orijinal dönmeden önce oluşur (non-fixed) konumunda (örneğin, .affix sınıfı ile değiştirilmesi ile ilgilidir .affix-bottom ) | Dene |
| affixed-bottom.bs.affix | Taban elemanı orijinal döner sonra oluşur (non-fixed) (örneğin, pozisyon .affix sınıfı ile değiştirilmiştir .affix-bottom ) | Dene |
Örnekler
yapıştırılmış navbar
yatay yapıştırılmış navigasyon menüsü oluşturun:
jQuery kullanarak otomatik olarak navbar tutturmak için
JQuery'nin kullanarak outerHeight() kullanıcının belirli bir elemanı geçirilen kaydırılan sonra navbar tutturmak için bir yöntem (<header>) :
Scrollspy & Ekler
Ile birlikte eklentisi yapıştırmayın kullanma Scrollspy eklentisi:
Yatay Menü (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> Kendin dene " Dikey Menü (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> Kendin dene " ekiyle ilgili Hareketli navbar
Farklı işlemek için CSS kullanma .affix sınıfları:
Örnek - Arka plan rengini değiştirin ve Tomardaki gezinme çubuğu arasında dolgu
.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;
} Kendin dene " Örnek - gezinme çubuğu üzerinde kaydırın
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition:
all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
} Kendin dene "