Dziś pokażę Wam dość przydatny trick, który podpatrzyłem korzystając z Magento. Otóż gdy przeglądamy jakieś długie strony i zjedziemy na tyle nisko, że znika nam z oczu górne menu pojawia się belka z kilkoma najważniejszymi opcjami.

Było to na tyle przydatne, że na początku nawet nie zwróciłem uwagi na tą belkę - po prostu zawsze była tam kiedy jej potrzebowałem.

To, że zostało to użyte w panelu administracyjnymi wcale nie znaczy, że nie znajdzie to użycia na normalnych stronach. Mozna przecież na tej belce umieścić dowolne informacje takie jak np. możliwość przypomnienia użytkownikowi, że jeśli podoba mu się ta strona niech zasubskrybuje rss lub uproszczone menu strony.

xhtml i css

Do naszego przykładu użyjemy następującej strony. Jak widać jest to prostu tabelka oraz guzik 'dodaj produkt'. Dopiszemy do niej naszą belkę na której będzie zawsze można zobaczyć przycisk 'dodaj produkt':

Oczywiście u każdego może to wyglądać troszkę inaczej. Ostylujmy to teraz:

Najważniejsze w tym jest tak naprawdę display:none, które ukrywa belkę (w czasie stylowanie warto to sobie wykomentować) oraz position:fixed; top:0; które spowodują, że belka zawsze będzie przyklejona do górnej krawędzi ekranu (nie działa to w IE6, jednak dość łatwo to można ominąć, np. tutaj).

Nasz właściwy skrypt

Skrypt musi robić dwie rzeczy:

• sprawdzać ile pikseli jesteśmy od górnej krawędzi strony
• na podstawie tego wyniku pokazać lub ukryć belkę

Napiszmy więc sobie funkcyjkę

Zmiennej scroll_size przypisujemy odległość od górnej krawędzi strony.

Następnie za każdy przesunięciem strony ($(window).scroll()) przeliczamy tą wielkość i sprawdzamy czy przekroczyła ona ustalony przez nas limit - jeżeli tak to pokaże nam belkę.

Teraz pozostaje to wywołać:

Jako pierwszą wartość podajmy id elementu który ma się pokazywać. Drugi to wysokość od której ma się pokazywać.

Gdybyście mieli jakieś problemy zerknijcie na źródło dema.

Podsumowanie

I już. Uzyskaliśmy naprawdę miły i przydatny gadżecik za pomocą kilku linijek jQuery.