position: sticky to nowy sposób określania pozycji elementów, który koncepcyjnie działa na zasadzie position: fixed. Różnica polega na tym, że element z atrybutem position: sticky w elemencie nadrzędnym zachowuje się jak position: relative, dopóki w widocznym obszarze nie zostanie osiągnięty określony próg przesunięcia.
Przykłady zastosowań
Parafraza z pierwotnej propozycji tej funkcji Edwarda O’Connora:
Przedstawiamy pozycjonowanie przyklejone
Dodając po prostu atrybut position: sticky (z prefiksem dostawcy), możemy wskazać element jako position: relative, dopóki użytkownik nie przewinie tego elementu (lub jego elementu nadrzędnego), tak aby znajdował się 15 pikseli od góry:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
Po top: 15px element zostaje ustalony.
Aby zilustrować tę funkcję w praktycznym kontekście, przygotowaliśmy wersję DEMO, która przykleja tytuły blogów podczas przewijania.
Stare podejście: zdarzenia przewijania
Do tej pory, aby uzyskać efekt klejenia, witryny konfigurują detektory zdarzeń scroll w JS. Używamy tej techniki również w samouczkach typu HTML5rocks. Na ekranach mniejszych niż 1200 pikseli pasek boczny spisu treści po pewnym czasie zmieni się na position: fixed.
Oto stary (teraz) nagłówek, który przykleja się u góry widocznego obszaru, gdy użytkownik przewija stronę w dół, i zapada w miejsce, gdy użytkownik przewija stronę w górę:
<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>
Wypróbuj: http://output.jsbin.com/omanut/2/
To dość proste, ale ten model szybko się rozbija, jeśli chcesz to zrobić dla kilku węzłów DOM, np. co <h1> tytuł bloga podczas przewijania.
Dlaczego JS nie jest idealnym rozwiązaniem
Ogólnie moduły obsługi przewijania nigdy nie są dobrym pomysłem. Ludzie często robią za dużo pracy i zastanawiają się, dlaczego ich interfejs działa niestabilnie.
Warto też pamiętać, że w celu zwiększenia wydajności coraz więcej przeglądarek stosuje przewijanie z akceleracją sprzętową. Problem polega na tym, że jeśli moduły obsługi przewijania JS są włączone, przeglądarki mogą przełączyć się z powrotem w wolniejszy tryb (oprogramowanie). Teraz nie korzystamy już z GPU. Wracamy do działania procesora. Efekt? Użytkownik podczas przewijania strony widzi większe zacięcie.
Dlatego właśnie ma sens korzystanie z takich funkcji w CSS.
Pomoc
Nie ma specyfikacji tego urządzenia. Została zaproponowana w czerwcu w stylu www, a właśnie trafiła do WebKit. Oznacza to, że brakuje odpowiedniej dokumentacji. Warto jednak pamiętać, że zgodnie z tym błędem ustawienie left i right wygrywa left. Analogicznie, jeśli jednocześnie są używane top i bottom, wygrywa top.
Obecnie obsługiwane są przeglądarki Chrome 23.0.1247.0 lub nowsze (obecna wersja Canary) oraz WebKit nocą.