position: sticky, öğeleri konumlandırmanın yeni bir yoludur ve kavramsal olarak position: fixed'e benzer. Aradaki fark, position: sticky içeren bir öğenin, görüntü alanında belirli bir ofset eşiği karşılanana kadar üst öğesinde position: relative gibi davranmasıdır.
Kullanım alanları
Edward O'Connor'ın bu özellikle ilgili orijinal teklifini parafrazla aktarıyoruz:
Yapışkan konumlandırma ile tanışın
position: sticky (tedarikçi ön ekiyle) ekleyerek, kullanıcı öğeyi (veya üst öğesini) en üstten 15 piksel aşağı kaydırana kadar bir öğenin position: relative olmasını sağlayabiliriz:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
top: 15px değerinde öğe sabitlenir.
Bu özelliği pratik bir ortamda göstermek için, siz ekranı kaydırırken blog başlıklarını sabitleyen bir DEMO hazırladım.
Eski yaklaşım: kaydırma etkinlikleri
Şimdiye kadar siteler, yapışkan efekti elde etmek için JS'de scroll etkinlik işleyicileri oluşturuyordu. html5rocks eğitimlerinde de bu tekniği kullanırız. 1.200 pikselden küçük ekranlarda, belirli bir miktarda kaydırma yapıldıktan sonra içindekiler listesi kenar çubuğu position: fixed olarak değişir.
Kullanıcı aşağı kaydırdığında görüntü alanının üst kısmına yapışan ve kullanıcı yukarı kaydırdığında tekrar yerine düşen bir başlık oluşturmanın eski yöntemini burada bulabilirsiniz:
<div class="header"></div>
<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
</script>
Deneyin: http://output.jsbin.com/omanut/2/
Bu oldukça kolaydır ancak bunu bir grup DOM düğümü için (ör. kullanıcı sayfayı kaydırırken bir blogun her <h1> başlığı) yapmak isterseniz bu model hızla çöker.
JS neden ideal değildir?
Genel olarak kaydırma işleyicileri hiçbir zaman iyi bir fikir değildir. Kullanıcılar çok fazla iş yapma eğilimindedir ve kullanıcı arayüzlerinin neden hantal olduğunu merak eder.
Ayrıca, performansı artırmak için donanım hızlandırmalı kaydırma özelliğini kullanan tarayıcı sayısı giderek artıyor. Bununla ilgili sorun, JS kaydırma işleyicileri etkinken tarayıcıların daha yavaş (yazılım) moda geçebilmesidir. Artık GPU'da çalışmıyoruz. Bunun yerine, CPU'ya geri dönüyoruz. Sonuç mu? Kullanıcılar sayfanızda gezinirken daha fazla takılma algılar.
Bu nedenle, bu tür bir özelliğin CSS'de açıklayıcı olması çok mantıklı.
Destek
Maalesef bu konuda bir spesifikasyon yok. Haziran ayında www-style'de önerilen bu özellik, WebKit'te kullanıma sunuldu. Yani bu konuda referans olarak kullanabileceğiniz iyi bir doküman yok. Ancak bu hataya göre, hem left hem de right belirtilirse left kazanır. Benzer şekilde, top ve bottom aynı anda kullanılıyorsa top kazanır.
Şu anda Chrome 23.0.1247.0 ve sonraki sürümler (mevcut Canary) ile WebKit gecelik sürümleri desteklenmektedir.