Cauta rapid aici ↑

Cum sa creezi un meniu secundar si care sa apara dupa ce s-a dat scroll un anumit numar de pixeli

Cu siguranta am intalnit un astfel de meniu in vizitele noastre pe alte site-uri si in randurile urmatoare va voi arata cum se face un astfel de meniu. Cel mai adesea acest meniu este creat pentru paginile care au un continut foarte bogat iar tag-ul body este foarte inalt si pentru a creea o experienta cat mai placuta utilizatorului cu scopul de a evita ca acesta sa dea scroll pana sus la meniu, daca acesta se afla pe la jumatatea paginii, atunci cream acest meniu secundar. Acest principiu l-am folosit pentru a va arata casuta din dreapta-sus a ferestrei browser-ului dvs. D-ati scroll pana sus si vedeti exemplul in actiune, restul este doar limbaj CSS.

In codul HTML este bine sa asezam meniul secundar imediat dupa ce s-a deschis tag-ul body. In acest mod il lasam deoparte de restul design-ului site-ului.

HTML

Pentru acest exemplu nu vom avea nevoie decat de cateva linii de cod in HTML. Spatiul pentru meniu si link-urile ce vor intra in interiorul acestuia. Pentru acest exemplu eu nu am mai folosit si link-uri, se intelege ideea.

CSS

Anumite proprietatii sunt obligatorii pentru a face ca acest meniu sa functioneze corect. Voi puteti continua sa vi-l stilizati dupa bunul plac.

JavaScript

Cu JavaScript vom face sa apara acest meniu dupa ce s-a dat scroll un anumit numar de pixeli, desi el sta ascuns datorita proprietatii display:none din CSS. Pentru a realiza asta vom rula o functie anonima pe obiectul window la evenimentul scroll. Functia va avea doua variabile. Prima va selecta elementul iar a doua variabila va retine cat sa dat scroll din pagina web. Dupa ce am creat aceste variabile, este timpul sa le folosim iar structura conditionara if va face sa ruleze o linie de cod ce va afisa elementul daca si numai daca in pagina s-a dat scroll minim 150 pixeli, in caz contrar urmatoarea linie de cod cu else va ascunde elementul din pagina web.

Pe acest principiu puteti afisa in pagina orice va doriti in momentul in care vizitatorul paginii a dat scroll un anumit numar de pixeli. De fapt acest principiu sta la baza paginile care par a avea un continut nesfarsit iar fereastra browser-ului se incarca cu noi informatii cand s-a dat scroll un numar mai mare de pixeli, insa pentru a realiza acest lucru este nevoie de AJAX, ce va rula tot intr-o structura if si va deschide un fisier de pe server prin intermediul HTTP.

INTREG CODUL