Bootstrap Eklenti Eklentisi (Gelişmiş)

Eklenti Eklentisi

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 ('den ile değerini değiştirirCSS position ) static.fixed

Örnek 1) Eklenmiş bir gezinme çubuğu:

Örnek 2) Eklenmiş bir kenar çubuğu:

Affix ile sayfayı yukarı ve aşağı kaydırdığımızda menü her zaman görünür durumda ve konumunda kilitli.

Yapıştırılmış Navigasyon Menüsü Nasıl Oluşturulur

Aşağıdaki örnek, yatay olarak yapıştırılmış bir gezinme menüsünün nasıl oluşturulacağını gösterir:

Aşağıdaki örnek, dikey olarak yapıştırılmış bir gezinme menüsünün nasıl oluşturulacağını gösterir:

Örnek Açıklama

data-spy="affix"Yapıştırılmasını istediğiniz öğeye ekleyin .

İsteğe bağlı data-offset-top|bottomolarak, kaydırma konumunu hesaplamak için özniteliği ekleyin.

Nasıl çalışır

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

• Eklenti , öğenin en üst veya en alt konumunda olduğunu belirtmek için .affix-topveya sınıfını ekler. .affix-bottomBu noktada CSS ile konumlandırma gerekli değildir.


• Eklenen öğeyi kaydırmak, asıl eklemeyi tetikler - Burası, eklentinin .affix-topveya .affix-bottomsınıfını .affixsınıf (kümeler position:fixed) ile değiştirdiği yerdir. Bu noktada, ekli öğeyi sayfada konumlandırmak için CSS topveya özelliği eklemelisiniz .bottom


• Bir alt ofset tanımlanmışsa, kaydırarak, .affixsınıfı ile değiştirir .affix-bottom. Ofsetler isteğe bağlı olduğundan, birini ayarlamak uygun CSS'yi ayarlamanızı gerektirir. Bu durumda, position:absolutegerektiğinde ekleyin.

Yukarıdaki ilk örnekte .affix, üstten 197 piksel kaydırdığımızda, Affix eklentisi sınıfı (position:fixed) <nav> öğesine ekler. Örneği açarsanız, sınıfa top0 değerine sahip CSS özelliğini eklediğimizi de göreceksiniz. .affixBu, üstten 197 piksel kaydırdığımızda gezinme çubuğunun her zaman sayfanın üstünde kalmasını sağlamak içindir.

Scrollspy ve Yapıştır

Affix eklentisini Scrollspy eklentisi ile birlikte kullanma :

Bootstrap Ek Referansını Tamamlayın

Tüm ekleme yöntemlerinin ve olaylarının eksiksiz bir referansı için Bootstrap JS Ek Referansımıza gidin .