position: sticky, öğeleri konumlandırmanın yeni bir yoludur ve kavram olarak position: fixed ile benzerdir. Aralarındaki fark, position: sticky içeren bir öğenin, görüntü alanında belirli bir ofset eşiğine ulaşılana kadar üst öğesi içinde position: relative gibi davranmasıdır.
Kullanım alanları
Edward O’Connor'ın bu özellikle ilgili orijinal teklifinden birkaç örnek:
Sabit konumlandırmayla tanışın
Kullanıcı, öğeyi (veya üst öğesini) üstten 15 piksel olacak şekilde kaydırana kadar position: sticky (tedarikçi firma önekli) ifadesini ekleyerek bir öğenin position: relative olacağını söyleyebiliriz:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
top: 15px olduğunda öğe sabitlenir.
Bu özelliği pratik bir ortamda açıklamak için, siz sayfayı kaydırırken blog başlıklarını sabitleyen bir DEMO hazırladım.
Eski yaklaşım: kaydırma etkinlikleri
Şu ana kadar, sabit etki elde etmek için siteler JS'de scroll etkinlik işleyicileri oluşturuyordu. Bu tekniği aslında html5rocks eğitimlerinde de kullanıyoruz. 1.200 pikselden küçük ekranlarda, içindekiler tablosu kenar çubuğumuz belirli bir miktarda kaydırma işleminden sonra position: fixed şekline dönüşür.
Kullanıcı sayfayı aşağı kaydırdığında görüntü alanının en üstünde sabit kalan ve yukarı kaydırdığında tekrar yerine oturan bir başlığın (artık eski yöntem) kullanımı şöyledir:
<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 işlem yeterince kolaydır ancak bir grup DOM düğümü için (örneğin, kullanıcı sayfayı kaydırırken blog'un her <h1> başlığı) bunu yapmak isterseniz bu model hızlıca bozulur.
JS neden ideal değildir?
Genel olarak, kaydırma işleyicileri hiçbir zaman iyi bir fikir değildir. İnsanlar genellikle çok fazla çalışır ve kullanıcı arayüzlerinin neden kötü olduğunu merak ederler.
Dikkate alınması gereken bir başka nokta da, performansı artırmak için donanım hızlandırmalı kaydırmayı giderek daha fazla tarayıcının kullanmasıdır. Sorun, JS kaydırma işleyicileri çalışırken tarayıcıların daha yavaş (yazılım) moduna geri dönebilmesidir. Artık GPU'da çalışmayız. Bunun yerine tekrar CPU'dayız. Peki bunun sonucunda ne olacak? Kullanıcılar sayfanızı kaydırırken daha fazla duraklama olduğunu fark ediyor.
Dolayısıyla bu tür bir özelliğin CSS'de bildirim temelli olması çok mantıklıdır.
Destek
Maalesef bunun için bir spesifikasyon yok. Haziran ayında www stilinde teklif edilmiş ve kısa süre önce WebKit'te kullanıma sunuldu. Bu da, ima edilecek iyi bir belge olmadığı anlamına gelir. Bununla birlikte, bu hataya göre, hem left hem de right belirtilmişse left kazanacaktır. Benzer şekilde, top ve bottom aynı anda kullanılırsa top kazanır.
Şu anda, her gece için Chrome 23.0.1247.0+ (geçerli Canary) ve WebKit desteği sunulmaktadır.