Headroom
Headroom eklentisi, sayfa kaydırıldığında yanıt verebilir; örneğin sayfa aşağı kaydırıldığında uygulama çubuğu kaybolur, yukarı kaydırıldığında ise tekrar görünür.
Daha önce tanıtılan kaydırma sırasında uygulama çubuğunu otomatik gizleme ve alt gezinme çubuğunu otomatik gizleme özellikleri bu eklenti kullanılarak gerçekleştirilmiştir.
Kullanım
- Özel öznitelikler aracılığıyla çağırma (bileşen dinamik olarak oluşturulmuşsa, başlatmak için
mdui.mutation()çağrılmalıdır) - JavaScript ile Çağır
Kullanım
Öznitelik ile Çağır
Bu yöntemi kullanırken JavaScript kodu yazmanıza gerek yoktur. Eklentiyi etkinleştirmek için öğeye mdui-headroom="options" özniteliğini eklemeniz yeterlidir.
Bileşen dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağrılmalıdır.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>JavaScript ile Çağır
Eklentiyi örnekleme:
// selector, bir CSS seçicisi veya DOM öğesidir
// options, eklenti parametreleridir, aşağıdaki parametre listesine bakın
var inst = new mdui.Headroom(selector, options);Parametre
| Parametre Adı | Tür | Varsayılan | Açıklama |
|---|---|---|---|
tolerance | int | Object | 5 | Öğe gizlenmeden önce ne kadar mesafe kaydırılacağı. Parametre değeri bir sayı ise, yukarı ve aşağı kaydırma tetikleme mesafesinin aynı olduğu anlamına gelir. Ayrıca, yukarı ve aşağı kaydırma için tetikleme mesafelerini ayrı ayrı belirten bir nesne de olabilir. Örneğin: |
offset | int | 0 | Sayfanın üst kısmından ne kadar mesafe sonra öğenin gizlenmeye başlayacağı. |
initialClass | string | mdui-headroom | Eklenti başlatıldıktan sonra öğeye eklenen CSS sınıfı. |
pinnedClass | string | mdui-headroom-pinned-top | Öğe sabitlendiğinde eklenen CSS sınıfı. |
unpinnedClass | string | mdui-headroom-unpinned-top | Sabitleme kaldırıldığında eklenen CSS sınıfı. |