SUNIPEYK

[ Okuma süresi tahmini 2 dakikadır ]

Sayfa kaydırırken, aşağı yukarı ilerlerken istediğiniz kısımların en üst veya en alt bölümde sabit kalmasını sağlayabiliyorsunuz. Bunu önceden position fixed ile yapıyorduk.

CSS position sticky, position fixed çok daha iyi. Tarayıcı desteği de hızla yükseldi. Herhangi bir script, jquery vb.’ne ihtiyacınız yok. Sadece CSS kodu ile yapabilirsiniz.

Örnek

Ufak bir örnek vermek gerekirse, ki zaten CSS kodunun kendisi de temelde 2 parçadan oluşuyor.

.sabitle{
    position: sticky;
    top: 0;
}

Dikkat etmeniz gereken bir kaç şey var, tabii. Öncelikle hangi tarayıcıların desteklediğine bakmak isteyebilirsiniz. Caniuse css-sticky sayfası tarayıcı ve versiyonları ile gösteriyor. Genel olarak toplamda 86.91% kullanım oranına sahip.

Ufak bir not eklemek isterim; Caniuse sayfası Opera mini tarayıcısının bu elementi desteklemediğini gösteriyor. Ancak iOS’da kurulu Opera mini de denediğimde çalıştığını gördüm. Sorun yok

Kullanmak için temel bilgi ve örnekleri w3schools How TO – Sticky Element sayfasında inceleyebilirsiniz.

Mozilla da position öğelerini anlattığı sayfada gerekli bilgileri veriyor.

Safari için Prefix gerekiyor

Evet, maalesef safari tarayıcılar için ek kod gerekiyor. O zaman;

.sabitle{
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

CSS kodumuz yukarıdaki gibi olması gerekiyor.

Sayfa en altına sabitleme

Yukarıda ki örnekler istediğiniz bölümün sayfanızın en üstüne sabitlenmesini sağlıyor. İsterseniz sayfanın altına da sabitleyebilirsiniz. Onun kodu da;

.sabitle{
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
}

Görüldüğü gibi top veya bottom kullanıyoruz.

Not

Dikkat etmeniz bir şeyden daha bahsedeyim. Üste sabitmelek istediğiniz bölümün zaten sayfanın üst kısımlarında olması daha mantıklı. Bir reklam bölümü, header veya menü gibi. Ya da istediğiniz bir başlığın hep üstte kalması gibi.

Aynı şekilde en alta sabitlemek isterseniz sabitleyeceğiniz bölümün alt kısımlarda ön konumlanması olması daha iyi sonuç verecektir.