Cztery lata temu Eric Bidelman opublikował w blogu dość niesamowity wpis o tym, że position: sticky wylądował w WebKit, który był wówczas silnikiem przeglądarki Chrome (oraz wielu innych przeglądarek, w tym Safari). Rok później, ku wielkiemu niezadowoleniu programistów, usunęliśmy position:sticky z Chrome, ponieważ „obecna implementacja nie jest zaprojektowana w sposób umożliwiający jej integrację z dotychczasowym systemem przewijania i kompozycji”.
Zawsze chcieliśmy przywrócić tę funkcję do Chrome, ponieważ błąd mówił: „Gdy już uporządkujemy system przewijania i kompozycji, powinniśmy wrócić do position:
sticky i zaimplementować tę funkcję w sposób, który dobrze się zintegruje z resztą silnika”. Błąd meta związany ze śledzeniem implementacji był analizowany od 2013 r.
Dobra wiadomość jest taka, że od wersji 56 Chrome (obecnie w wersji beta od grudnia 2016 r., stabilnej od stycznia 2017 r.) position: sticky wrócił do Chrome.
Co to jest position:sticky?
Dotarcie do tego momentu zajęło trochę czasu, więc dlaczego jestem podekscytowany?
position:sticky to atrybut pozycjonowania w CSS, który umożliwia zablokowanie elementu w widocznym obszarze (np.zakotwiczenie go u góry ekranu), ale tylko wtedy, gdy jego element nadrzędny jest widoczny w widocznym obszarze i mieści się w wartości progowej. Jeśli element nie jest przymocowany do widocznego obszaru, będzie działał jak element position: relative. Jest to bardzo przyjemne i proste uzupełnienie platformy, które eliminuje konieczność korzystania z JavaScriptu w obiekcie onscroll tylko po to, aby zablokować element u góry widocznego obszaru.
Tak to wygląda na moim blogu. Dzięki temu nagłówek bieżącej sekcji będzie widoczny u góry ekranu, gdy czytasz moje dość długie i trudne artykuły :\
Aby wdrożyć tę funkcję, określ, że atrybut position powinien mieć wartość sticky w przypadku elementu, który chcesz zablokować.
Dodatkowo możesz dodać przesunięcie, które określa, gdzie ma być umieszczony element.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
Poprzedni przykład powoduje, że element <h3> jest oddalony o 10 pikseli od górnej krawędzi widocznego obszaru. Aby ustawić go bezpośrednio u góry widoku, ustaw atrybut top na top: 0px.
Ta funkcja jest bardzo popularna. Jest ona dostępna w Chrome (hura!), Firefoxie i Safari. Oto więcej informacji o position:sticky: