Bootstrap JS Eki
JS Eki (affix.js)
Affix eklentisi, bir öğenin sayfadaki bir alana yapıştırılmasına (kilitlenmesine) izin verir. Bu, sayfayı yukarı ve aşağı kaydırırken belirli bir alana "yapışmasını" sağlamak için genellikle gezinme menüleri veya sosyal simge düğmeleriyle birlikte kullanılır.
Eklenti, kaydırma konumuna bağlı olarak bu davranışı açar ve kapatır (CSS konumunun değerini statikten sabite değiştirir).
Eklenti eklentisi üç sınıf arasında geçiş yapar: .affix, .affix-top, ve
.affix-bottom. Her sınıf belirli bir durumu temsil eder. Sınıf dışında position:fixed
, gerçek konumları işlemek için CSS özellikleri eklemelisiniz ..affix
Daha fazla bilgi için Bootstrap Affix Eğitimimizi okuyun .
İpucu: Affix eklentisi genellikle Scrollspy eklentisi ile birlikte kullanılır .
Veri-* Öznitelikler aracılığıyla
data-spy="affix"Gözetlemek istediğiniz öğeye
ve kaydırma konumunu hesaplamak için özniteliğe ekleyin .data-offset-top|bottom="number"
Örnek
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
JavaScript aracılığıyla
Şunlarla manuel olarak etkinleştirin:
Örnek
$('.nav').affix({offset: {top: 150} });
Ekleme Seçenekleri
Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, data-offset="" gibi seçenek adını data-'ya ekleyin.
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
Olayları Ekle
Aşağıdaki tablo, mevcut tüm ek olaylarını listeler.
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
|
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
|
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
|
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
|
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
|
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
Daha fazla örnek
ekli gezinme çubuğu
Yatay olarak yapıştırılmış bir gezinme menüsü oluşturun:
Örnek
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Bir gezinme çubuğunu otomatik olarak eklemek için jQuery kullanma
Kullanıcı kaydırma yaptıktan sonra belirtilen bir öğeyi (<header>) geçtikten sonra gezinme çubuğunu yapıştırmak için jQuery'nin externalHeight() yöntemini kullanın:
Örnek
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy ve Yapıştır
Affix eklentisini Scrollspy eklentisi ile birlikte kullanma :
Yatay Menü (Gezinme Çubuğu)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
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>
Ekteki animasyonlu gezinme çubuğu
Farklı .affix sınıflarını işlemek için CSS kullanın:
Örnek - Kaydırma sırasında arka plan rengini ve gezinme çubuğunun dolgusunu değiştirin
.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;
}
Örnek - Gezinme çubuğunda 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;
}