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
![Przyklejone wersje demonstracyjne](https://developer.chrome.google.cn/static/blog/stick-your-landings-position-sticky-lands-in-webkit/image/sticky-demo-aa52b29fe6e7f.jpg?hl=pl)
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ą.