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ć

Z HTML-ową listą jest jak w życiu, albo wszystko się układa jak powinno, albo chybiamy z osiągnięciami naszych celów. Nie zawsze da się ustrzelić pluszowego misia dla dziewczyny na strzelnicy. Nie zawsze komplet kluczy nasadowych dla chłopaka okaże się brakującym elementem jego warsztatu. Tyle, że listę można szybko naprawić, natomiast w przypadku wymienionych sytuacji, trzeba kupić kolejny bilet lub zatryndalać z paragonem do marketu.

Zdarzało Ci się pracować z jakimś arkuszem kalkulacyjnym? Fajna była opcja zamrożenia pierwszej kolumny, aby widzieć z którym wierszem mamy do czynienia. Równie fajne było zamrażanie nagłówka naszej tabeli z ważnymi wydatkami domowymi. Kiedyś można było tylko westchnąć na myśl o czymś takim w HTML. Były co prawda metody wykorzystujące JavaScript, ale aż mózg trzeszczał kiedy implementowało się ten sposób.

Jeszcze nie zaczęły się Święta, a już pewnie wszyscy pomęczni. W związku z tym dziś nie będzie "męczących" teorii, ale coś dla relaksu, nawiązującego do świątecznej atmosfery. Prosta gra w czystym CSS (PHP użyłem tylko do wygenerowania losowości, aby za każdym uruchomieniem elementy były inaczej ułożone). Wykorzystałem tu jakiś czas temu opisywany "cycle button" - kto nie czytał, albo nie pamięta, zachęcam do przeczytania. A kto już chce zagrać, zapraszam:

Mówią, że ilu ludzi tyle opinii. Nie wiem czy to się przekłada na przedstawianie rozwiązań. Chyba nie, bo dziś w liczbie osób 1, przedstawię Ci aż 4 sposoby na efekt hover. Dwa z nich znasz z pewnością, jeden być może, a ostatni być może być może.

Dziś odcinek dla wymagających. I to podwójnie, a nawet potrójnie będą spełnione ich oczekiwania, bo oprócz osiągnięcia dwóch korzyści jednym rozwiązaniem, takowe będzie przedstawione w wyjątkowo krótki sposób. Wyrównanie zmiennym jest! Właśnie o tym, bez sztywniactwa, zaraz pogadamy.