position: sticky to nowy sposób pozycjonowania elementów, który pod względem koncepcji przypomina position: fixed. Różnica polega na tym, że element z wartością position: sticky zachowuje się jak element position: relative w swoim elemencie nadrzędnym, dopóki nie zostanie osiągnięty określony próg przesunięcia w widocznym obszarze.
Przypadki użycia
Parafrazując pierwotną propozycję tej funkcji autorstwa Edwarda O’Connora:
Wprowadzamy przyklejone pozycjonowanie
Wystarczy dodać position: sticky (prefiks dostawcy), aby element był position: relative, dopóki użytkownik nie przewinie elementu (lub jego nadrzędnego) o 15 pikseli od góry:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
O top: 15px element staje się stały.
Aby zilustrować tę funkcję w praktycznym zastosowaniu, przygotowałem DEMO, w którym tytuły blogów są przyklejane podczas przewijania.
Stare podejście: zdarzenia przewijania
Do tej pory, aby uzyskać efekt przylegania, witryny konfigurowały w JS detektory zdarzeń scroll. W samouczkach na stronie html5rocks używamy tej techniki. Na ekranach mniejszych niż 1200 pikseli pasek boczny z spisem treści po pewnym czasie przewijania zmienia się na position: fixed.
Oto (obecnie już nieaktualny) sposób na umieszczenie nagłówka, który przykleja się do górnej krawędzi widocznego obszaru, gdy użytkownik przewija w dół, a powraca na swoje miejsce, gdy użytkownik przewija 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 proste, ale ten model szybko się psuje, gdy chcesz zastosować go do wielu węzłów DOM, np. do każdego <h1> tytułu bloga, gdy użytkownik przewija stronę.
Dlaczego JavaScript nie jest idealny
Ogólnie rzecz biorąc, uchwyty do przewijania nigdy nie są dobrym pomysłem. Ludzie często wykonują zbyt dużo pracy i się zastanawiają, dlaczego ich interfejs jest niestabilny.
Warto też pamiętać, że coraz więcej przeglądarek stosuje akcelerację sprzętową przewijania w celu zwiększenia wydajności. Problem polega na tym, że w przypadku obsługi przewijania w JS przeglądarki mogą przejść do wolniejszego trybu (oprogramowania). Teraz nie korzystamy już z procesora graficznego. Zamiast tego wracamy do procesora. Efekt? Użytkownik może zauważyć więcej zacięć podczas przewijania strony.
Dlatego warto zastosować tę funkcję w CSS w sposób deklaratywny.
Pomoc
Niestety nie ma specyfikacji dla tego typu. Został zaproponowany w www-style w czerwcu i właśnie wylądował w WebKit. Oznacza to, że nie ma dobrej dokumentacji, na którą można się powołać. Warto jednak pamiętać, że zgodnie z tym błędem, jeśli określone są zarówno left, jak i right, zwycięża left. Podobnie, jeśli top i bottom są używane jednocześnie, zwycięża top.
Obecnie obsługiwane są wersje Chrome 23.0.1247.0 lub nowsze (obecna wersja Canary) oraz WebKit nightly.