Dört yıl önce Eric Bidelman, position: sticky WebKit'e geldiğini anlatan harika bir blog yayını hazırladı. WebKit o zamanlar Chrome'u (ve Safari dahil olmak üzere başka pek çok tarayıcıyı) destekleyen motordu. Bir yıl sonra ve web geliştiricilerini endişelendiren position:sticky özelliğini Chrome'dan kaldırdık. Bunun nedeni, "mevcut uygulamanın, mevcut kaydırma ve birleştirme sistemiyle iyi bir şekilde entegre olacak şekilde tasarlanmamasıdır".
Hatanın da belirttiği gibi, Chrome'da her zaman geri almayı istemiştik: "Kaydırma ve birleştirme anamızı tamamladıktan sonra, position:
sticky sayfasına geri dönmeli ve özelliği, motorun geri kalanıyla iyi bir şekilde entegre olacak şekilde uygulamalıyız". Uygulamayı izleyen meta hata, 2013 yılından beri üzerinde çalışılmaktadır.
Güzel bir haberimiz var. Chrome 56'dan itibaren (Şu anda Aralık 2016'dan itibaren beta sürümündedir, Ocak 2017'de mevcuttur) position: sticky artık Chrome'da kullanılabilir.
location:sticky nedir?
Buraya gelmek biraz zaman aldı, peki bu konuda neden heyecanlıyım?
position:sticky, bir öğeyi yalnızca üst öğesi görüntü alanında göründüğünde ve eşik değeri dahilinde olduğunda görüntü alanına sabitlemenize (yani ekranın üst kısmına sabitlemenize) olanak tanıyan bir CSS konumlandırma özelliğidir. Görüntü alanına sabitlenmediğinde, öğe position: relative gibi davranır. Bir öğeyi görüntü alanının üst kısmına kilitlemek için onscroll etkinlik işleyicide JavaScript kullanma ihtiyacını ortadan kaldıran bu platform, oldukça kullanışlı ve basit bir eklemedir.
Blogumda bu şekilde görünüyor. Bu, siz oldukça uzun ve zahmetli makalelerimi okurken mevcut bölümün başlığını ekranın üst kısmında tutmamı sağlıyor :\
Bu özelliği uygulamak için, takılıp kalmasını istediğiniz öğede position özelliğinin sticky değerine sahip olması gerektiğini belirtin.
Ayrıca, belirli uzaklıkta kopyasının takılması gereken noktaya ofseti 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 olacak şekilde sabitlenir. Bunu doğrudan görüntü alanının üst kısmına düzeltmek için top özelliğini top: 0px olarak ayarlarsınız.
Bu özellik için son derece güçlü bir destek sunuluyor. Chrome (yay), Firefox ve
Safari'de kullanılabilir. position:sticky ile ilgili daha fazla bilgiyi aşağıda bulabilirsiniz: