Bootstrap Affix Plugin (Advanced)

Ekler Eklentisi

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 kaydırma konumuna bağlı olarak, (sabit, durağan CSS pozisyonunun değerini değiştirir).

Örnek 1) bir yapıştırılmış navbar:

Örnek 2) bir sabitlenmiş kenar:

Biz yukarı ve sayfanın altındaki yapıştırın ile, menü her zaman görünür ve konumda kilitli olduğunu.

Nasıl yapıştırılmış Navigasyon Menüsü Oluşturma

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

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

Örnek Açıklaması

Ekle data-spy="affix" Eğer yapıştırılmış istediğiniz öğeye.

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

Nasıl çalışır

: Üç 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.

• Eklenti ekler .affix-top veya .affix-bottom eleman olduğunu göstermek için sınıfın en üst ya da en alt konumu. CSS ile Konumlandırma bu noktada gerekli değildir.


• Yapıştırılmış elemanının geçen kaydırma gerçek tutturma tetikler - eklenti yerine bu noktada .affix-top veya .affix-bottom ile sınıf .affix sınıfı (sets position:fixed ) . Bu noktada, CSS eklemelisiniz top veya bottom sayfasında yapıştırılmış eleman yerleştirmek için özellik.


• Ofset bir alt tanımlanırsa, bu son kaydırma yerine .affix ile sınıf .affix-bottom . uzaklıklar isteğe olduğundan, birini ayarlamayı uygun CSS ayarlamak gerektirir. Bu durumda, eklemek position:absolute gerektiğinde.

Yukarıdaki ilk örnekte, Ekler eklenti ekler .affix sınıf (position:fixed) için <nav> en üstteki 197 piksel kaydırdığınız zaman elemanı. Eğer örnek açarsanız, aynı zamanda CSS eklendi göreceksiniz top 0 değeriyle özellik .affix sınıfına. Bu, yukarıdan 197 piksel kaydırıldığında ne zaman navbar, tüm zamanların en sayfanın üst kısmında kalır emin olmaktır.

Scrollspy & Ekler

Ile birlikte eklentisi yapıştırmayın kullanma Scrollspy eklentisi:

Tamamlayın Bootstrap Ekler Referansı

Bütün tam bir referans yöntem ve olayları yapıştırmayın için lütfen gidin Bootstrap JS Ekler Referans .