Ana içeriğe geç

Pozisyon

Sabit üst

Bir öğeyi görünüm alanının üst kısmına, kenardan kenara yerleştirin. Projenizde sabit pozisyonun sonuçlarını anladığınızdan emin olun; ek CSS eklemeniz gerekebilir.

<div class="fixed-top">...</div>

Sabit alt

Bir öğeyi görünüm alanının alt kısmına, kenardan kenara yerleştirin. Projenizde sabit pozisyonun sonuçlarını anladığınızdan emin olun; ek CSS eklemeniz gerekebilir.

<div class="fixed-bottom">...</div>

Yapışkan üst

Bir öğeyi görünüm alanının üst kısmına, kenardan kenara yerleştirin, ancak yalnızca onun üzerinden kaydırdığınızda.

<div class="sticky-top">...</div>
bilgi

Unutmayın: Yapışkan üst pozisyon, kullanıcı kaydırdıkça görünür kalmaktadır, bu nedenle kullanımı dikkatli bir şekilde değerlendirilmelidir.

Duyarlı yapışkan üst

Duyarlı varyasyonlar .sticky-top yardımcı işlevi için de mevcuttur.

<div class="sticky-sm-top">SM (küçük) boyutundaki veya daha geniş görünüm alanlarında üstte kalır</div>
<div class="sticky-md-top">MD (orta) boyutundaki veya daha geniş görünüm alanlarında üstte kalır</div>
<div class="sticky-lg-top">LG (büyük) boyutundaki veya daha geniş görünüm alanlarında üstte kalır</div>
<div class="sticky-xl-top">XL (ekstra büyük) boyutundaki veya daha geniş görünüm alanlarında üstte kalır</div>
<div class="sticky-xxl-top">XXL (ekstra ekstra büyük) boyutundaki veya daha geniş görünüm alanlarında üstte kalır</div>

Yapışkan alt

Bir öğeyi görünüm alanının alt kısmına, kenardan kenara yerleştirin, ancak yalnızca onun üzerinden kaydırdığınızda.

<div class="sticky-bottom">...</div>
ipucu

İpucu: Duyarlı yapışkan alt pozisyonları kullanarak, farklı cihaz boyutları için optimize edilmiş bir kullanıcı deneyimi sunabilirsiniz.

Duyarlı yapışkan alt

Duyarlı varyasyonlar .sticky-bottom yardımcı işlevi için de mevcuttur.

<div class="sticky-sm-bottom">SM (küçük) boyutundaki veya daha geniş görünüm alanlarında altta kalır</div>
<div class="sticky-md-bottom">MD (orta) boyutundaki veya daha geniş görünüm alanlarında altta kalır</div>
<div class="sticky-lg-bottom">LG (büyük) boyutundaki veya daha geniş görünüm alanlarında altta kalır</div>
<div class="sticky-xl-bottom">XL (ekstra büyük) boyutundaki veya daha geniş görünüm alanlarında altta kalır</div>
<div class="sticky-xxl-bottom">XXL (ekstra ekstra büyük) boyutundaki veya daha geniş görünüm alanlarında altta kalır</div>