Dört yıl önce Eric Bidelman, position: sticky'nin o zamanlar Chrome'u (ve Safari dahil diğer birçok tarayıcıyı) destekleyen motor olan WebKit'e eklenmesiyle ilgili oldukça etkileyici bir blog yayını hazırladı. Bir yıl sonra, web geliştiricilerinin büyük hayal kırıklığına uğramasına neden olarak position:sticky'ı Chrome'dan kaldırdık. Bunun nedeni, "mevcut uygulamanın mevcut kaydırma ve oluşturma sistemiyle iyi bir şekilde entegre olacak şekilde tasarlanmamış olması"ydı.
"Kaydırma ve oluşturma bölümünü düzene soktuktan sonra position:
sticky özelliğini geri alıp motorun geri kalanıyla iyi şekilde entegre olacak şekilde uygulamamız gerekir" şeklindeki hata mesajında da belirtildiği gibi, bu özelliği Chrome'a geri getirmek için her zaman istekliydik. Uygulamayı izleyen meta hatası üzerinde 2013'ten beri çalışılıyor.
Güzel bir haberimiz var. Chrome 56'dan itibaren (Aralık 2016 itibarıyla beta, Ocak 2017 itibarıyla kararlı) position: sticky Chrome'a geri döndü.
position:sticky nedir?
Bu noktaya gelmek biraz zaman aldı. Peki neden heyecanlıyım?
position:sticky, bir öğeyi görüntü alanına sabitlemenize (ör.ekranın üst kısmına sabitlemenize) olanak tanıyan bir CSS konumlandırma özelliğidir ancak yalnızca üst öğesi görüntü alanında görünür ve eşik değerinin içinde olduğunda geçerlidir. Görüntü alanına sabitlenmediğinde öğe position: relative gibi davranır. Bu özellik, platforma eklenen çok güzel ve basit bir özelliktir. Bir öğeyi görüntü alanının üst kısmına kilitlemek için onscroll etkinlik işleyicisinde JavaScript kullanma ihtiyacını ortadan kaldırır.
Bu, blogumda nasıl göründüğünü gösteriyor. Bu sayede, oldukça uzun ve zahmetli makalelerimi okurken mevcut bölümün başlığını ekranın üst kısmında tutabilirim :\
Bu özelliği uygulamak için, sabitlemek istediğiniz öğede position özelliğinin sticky değerine sahip olması gerektiğini belirtin.
Ayrıca, yapıştırılması gereken yerin ofsetini de ekleyebilirsiniz.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
Önceki örnekte, <h3> öğesi görüntü alanının üst kısmından 10 piksel uzaklıkta sabitlenir. Doğrudan görüntü alanının üst kısmına sabitlemek için top özelliğini top: 0px olarak ayarlarsınız.
Bu özellik için destek oldukça güçlüdür. Bu özellik Chrome (yay), Firefox ve Safari'de kullanılabilir. position:sticky hakkında daha fazla bilgiyi aşağıda bulabilirsiniz: