Kawałek Kodu

Czy dzisiejszy odcinek będzie nawiązywał do braku higieny? Nie. Czy będzie nawiązywał do nalepek na lodówkę? Nie. Czy będzie nawiązywał do position: sticky? Tak! Ale będzie to prawie position: double-sticky!

Icky.

Pozycjonowanie sticky nie jest już nowością. Ale jest wspaniałym rozwiązaniem pozwalającym tworzyć nam "klejący" pasek nawigacji bez potrzeby ustawiania paddingów na elementach i obsługiwania zdarzenia scroll. Łączy w sobie dwa typy pozycjonowania: relatywne - kiedy element powinien znajdować się w viewport i przewija się wraz z nadrzędnym kontenerem, i fixed - kiedy przy dalszym przewijaniu kontenera element powinien się zatrzymać. Oczywiście moment kiedy przeglądarka mówi: "Stop! Zakaz wyjazdu!" nie musi być krawędzią przeglądarki. Możemy ustalić, że element ma się zatrzymywać 10px przed krawędzią, ale i 10px za krawędzią (czyli delikatnie schowany). Do zatrzymania może dojść również w momencie kiedy jeszcze nie zaczęliśmy przewijać. Np. kiedy element jest bardzo blisko krawędzi, ale ustaliliśmy pozycję na więcej pikseli niż wynosi naturalna odległość. Wtedy elementy stanie się "sticky" już na starcie. Co jest jeszcze fajne, to, że możemy go przyklejać