4 lata temu Eric Bidelman napisał na blogu ciekawy post o tym, że usługa position: sticky weszła do systemu WebKit, który w tamtym czasie był mechanizmem zasilającym Chrome (i wiele innych przeglądarek, w tym Safari). Po roku, ku kłopotowi programistów, usunęliśmy dyrektywę position:sticky z Chrome, ponieważ „obecna implementacja nie jest zaprojektowana w sposób, który dobrze integruje się z dotychczasowym systemem przewijania i komponowania”.
Zawsze chcialiśmy przywrócić ją do Chrome zgodnie z opisem błędu: „Po uporządkowaniu swojej witryny do przewijania i komponowania musimy wrócić do position:
sticky i zaimplementować tę funkcję w sposób, który dobrze integruje się z resztą silnika”. Metabłąd śledzący
implementację pracowaliśmy od 2013 roku.
Dobra wiadomość jest taka, że od Chrome 56 (obecnie w wersji beta w grudniu 2016 r., wersja stabilna w styczniu 2017 r.) position: sticky jest już z powrotem w Chrome.
Czym jest element position:sticky?
Minęło trochę czasu, zanim do Ciebie dotrze, więc dlaczego tak mi się podoba?
position:sticky to atrybut pozycjonowania CSS, który pozwala dopasować element do widocznego obszaru (tj.zakotwiczyć go na górze ekranu), ale tylko wtedy, gdy jego element nadrzędny jest widoczny w widocznym obszarze i znajduje się w ramach wartości progu. Jeśli nie jest on na stałe umieszczony w widocznym obszarze, zachowuje się tak, jakby miał postać position: relative. To bardzo miłe i proste w obsłudze rozszerzenie platformy, które eliminuje konieczność użycia JavaScriptu w module obsługi zdarzeń onscroll tylko po to, aby zablokować element na górze widocznego obszaru.
Tak wygląda to na moim blogu. Dzięki temu mogę zachować nagłówek bieżącej sekcji na górze ekranu podczas czytania moich długich i pracowitych artykułów :\
Aby wdrożyć tę funkcję, określ, że atrybut position powinien mieć wartość sticky w elemencie, który ma być (er, zablokowany).
Możesz też dodać przesunięcie w miejscu, w którym ma się zacisnąć.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
W poprzednim przykładzie poprawiono element <h3> znajdujący się w odległości 10 pikseli od góry widocznego obszaru. Aby umieścić go bezpośrednio na górze widocznego obszaru, ustaw atrybut top jako top: 0px.
Ta funkcja jest dość mocno wspierana. Aplikacja jest dostępna w Chrome,
Firefoksie i Safari. Oto więcej informacji na temat: position:sticky: