Astfel, sarcina de astăzi pentru a face un meniu care se lipeste de partea de sus a browser-ului atunci când pagina este defilat.
Pentru munca, avem nevoie de biblioteca jQuery și un browser cu suport pentru CSS3.
Să începem cu structura HTML a meniului nostru, și nu a fost atât de diferit de toți ceilalți.
Structura meniului HTML
Desigur, că meniul nostru a dobândit un aspect de recunoscut, am făcut un pic Styling.
CSS Codul de meniuri
Acum, după toate lucrările pregătitoare, putem începe să abordeze problema în sine.
Pentru a se lipi la partea de sus a meniului în timpul derulării, avem nevoie de două lucruri:
- Primul - să știe ce poziția este de a derula browser. Când derulați pagina la momentul potrivit pentru a schimba stilul de meniul nostru.
- Al doilea - pentru a crea o clasă separată pentru meniul cu o poziție fixă și lățimea întregului ecran.
În ceea ce privește prima sarcină, pentru a face față cu ea un pic de cod jQuery, dar mai întâi vom crea un stil separat pentru meniul nostru fix și standardul.
clase separate pentru meniul de stare fixă și normală
Adăugați o nouă clasă de la meniul
cod jQuery
Acum, codul pentru prima problemă:
Asta e, practic, toate de punere în aplicare, dar nu ne vom opri și va merge mai departe.
Un pic de CSS3 pentru frumusete
Styling meniul nostru cu ajutorul CSS3, adăugați umbre, colțuri rotunjite, etc. Adăugați o altă clasă SPE-alfa bg, care va conține valorile de fond în format RGBA. Versiunea finală de stiluri:
Adăugați efecte jQuery.
Acum puteți juca cu apariția spectaculoasă a meniului nostru. Noi folosim metoda Hover pentru a adăuga și elimina fundal meniu transparent, atunci când treceți cursorul și îndepărtarea.
În concluzie putem spune că nu există nici o limită la perfecțiune, și să continue să se joace cu stiluri și efecte pot fi lung.
Pe fondul acestei lecții are o altă idee: să facă extinderea conținutul principal cu dispariția Sidebar specii (ca VKontakte).
Alo Am o întrebare similară, numai reg.ru hosting, eu nu pot înțelege în cazul în care doriți să adăugați codul jQuery și în cazul în care un nou fișier cu acest cod pentru a crea, cum să-l numesc pentru a face să funcționeze? bloc Adăugat cu HTML, CSS și jQuery să stil mai întâi în fișierul menu.js nou creat într-un folder pe un server de js, prescris în blocul cu meniu conexiune jQuery ca aceasta:
Am încercat și mai ușor, dar este, în opinia mea cel mai bun, și nimic nu a venit de ea. meniuri frumoase sinia apar, dar nu zalepaet alte cuvinte jQuery nu funcționează. Nu sunt foarte puternic în toate acestea. și mai ales în .js, dacă nu este greu să spun ce fel de cale de ieșire din această situație.
multumesc anticipat
Alo M-ai ajutat foarte mult, am ai citit tot timpul. Și cum să facă acest lucru ar fi după defilare meniu numărul de pixeli opredelonooe să apară fără probleme și nu tresar? Așteptare pomoschi.Zaranee mulțumiri.
Încercați să specificați limita inferioară pentru coborârea și apoi starea dumneavoastră este schimbat după cum urmează:
if ($ (fereastră) .scrollTop ()> sidebarTop || $ (fereastră) .scrollTop ()> sidebarBottom), în cazul în care sidebarBottom - acest $ (el) .offset () sus + $ .height (el) () ;.
ceva de genul asta
Eu chiar nu înțeleg destul de js ....
adică este necesar să se adauge această condiție
if ($ (fereastră) .scrollTop ()> sidebarTop || $ (fereastră) .scrollTop ()> sidebarBottom)
explica sidebarBottom asa?:
var sidebarBottom = $ (el) .offset () sus + $ (el) .height () .;
pot să placă un cod pentru a scrie, și apoi eu fac greșit
fac
înălțimea (sau înălțimea de aici atât de gol și se lasă?);
Buna ziua! Ajuta modul securizat (Joomla 3.x, șablon GavickPro)! Vreau să asigure modulul «topbar» atunci când defilare, acesta a fost inițial situat în partea de sus pe întreaga lățime și role, împreună cu derularea.
Există doar o singură întrebare specifică: Te rog ajută-mă, ce fișier pentru al insera (uneori confunda css si html). Am citit destule resurse, dar un pic confuz atunci când nu știi de unde să copieze.
Bună ziua, și cum te pot ajuta?
Noapte bună, opțiune excelentă a unui meniu fix.
Cum de a modifica un cod de jQuery gata, astfel încât, atunci când derulați până la sfârșitul meniului fixat în partea de sus a dispărut (de ex. E. Probabil clasa a fost schimbat la implicit)?
Am încercat să introducă acest lucru este a treia condiție:
else if ($ (aceasta) .scrollBottom () = $ Menu.hasClass ( «fix»)) $ menu.fadeOut ( 'rapid', funcția () $ (aceasta) .removeClass ( «fix»)
.addClass ( «default»)
.fadeIn ( 'rapid');
>);
>
Nu a funcționat! Ați putea spune ce este greșit și de a face direcția correctament de la mine?
Chiar și pe site-ul dvs. pe același post, am lăsa întrebarea despre „tranziție lină“ - au câștigat deja.
Salut observat că nu ați conectat la biblioteca jQuery la proiect, în acest script nu rulează pe site.
Conectați biblioteca și atinge scopul, am vedea codul
Te rog spune-mi. Meniul face pentru a muta filele pe aceeași pagină, și că trecerea de la un punct la o altă parte a paragrafului de deschidere este ascuns sub un meniu, cum să-l repara?
în cazul în care designul permite, trebuie doar să adăugați un spațiu intern de mai sus, la înălțimea meniului, pentru fiecare „puncte deschise“
dar, în cazul în care designul nu permite acest lucru, atunci va scrie, va trebui să modificați script-
Alo Faptul că unitatea este inițial o poziție fixă și marginea superioară a paginii în 75 de pixeli. A se vedea codul meu articol, te va ajuta. Meniul trebuie să fie pus în aplicare, astfel încât acesta a fost inițial un hedderom și numai atunci când defilare script-ul, l-am schimba într-o clasă cu o poziție fixă.
Dmitry. Vă mulțumim pentru răspunsul dumneavoastră, atunci asta e ceea ce situația este: blocul roșu se află înainte de eticheta corpului pentru un meniu static, aici codul
var sm_bg_block = «# bloc-new9" ; // identificator al barei de meniu principal
var sm_gap = 75; // schimbare de meniu (în pixeli) de la adevăratele limitele ferestrei
var sm_shift = 0; // schimbare de meniu (în pixeli) orizontal din centrul ecranului
/ * Pentru o funcționare corectă meniu nu este recomandat pentru a schimba codul viitor * /
var sm_menu = «»;
var sm_x_crd = [];
var sm_y_crd = [];
var sm_bg_top, sm_bg_left, sm_bg_bot, sm_bg_right, sm_bg_zi;
var sm_i = 0;
var sm_x = 0;
var sm_y = 0;
var sm_bg_w = 0;
sm_bg_zi = parseInt ($ (sm_bg_block) .css ( «z Index»));
sm_bg_top = parseInt ($ (sm_bg_block) .css ( 'sus'));
sm_bg_left = parseInt ($ (sm_bg_block) .css ( 'stânga'));
sm_bg_right = sm_bg_left + $ (sm_bg_block) .width ();
sm_bg_bottom = sm_bg_top + $ (sm_bg_block) .height ();
$ ( 'Div'). Fiecare (function ()
dacă (
(sm_bg_zi
(Sm_bg_bottom> (parseInt ($ (aceasta) .css ( 'sus')) + $ (aceasta) .height ())))
)
sm_menu + = ( «#» + $ (aceasta) .attr ( 'id') + »,«);
>
>);
sm_menu = sm_menu.substring (0, sm_menu.length-2);
$ (Sm_bg_block) .css ( 'poziție', 'fix');
$ (Sm_bg_block) .css ( 'z-index', parseInt ($ (sm_bg_block) .css ( 'z-index')) + 500);
$ ( 'Organism'), adăugați ($ (sm_bg_block)) .;
$ (Sm_menu) .each (funcția ()
$ (Aceasta) .css ( 'poziție', 'fix');
$ (Aceasta) .css ( 'z-index', parseInt ($ (aceasta) .css ( 'z-index')) + 500);
$ ( 'Organism') Append ($ (aceasta)) .;
>);
sm_bg_top = $ (sm_bg_block) .Poziție () sus .;
sm_bg_left = $ (sm_bg_block) .Poziție () din stânga .;
$ (Sm_menu) .each (funcția ()
sm_x_crd [sm_i] = $ (aceasta) .Poziție () la stânga - sm_bg_left .;
sm_y_crd [sm_i] = $ (aceasta) .Poziție () sus - sm_bg_top .;
sm_i ++;
>);
sm_bg_w = $ (sm_bg_block) .width ();
sm_y = sm_gap;
sm_i = 0;
$ (Sm_menu) .each (funcția ()
$ (Aceasta) .css ( 'top', sm_y + sm_y_crd [sm_i]);
sm_i ++;
>);
$ (Sm_bg_block) .css ( 'de sus', sm_y);
$ (Fereastră) .resize (funcția ()
sm_i = 0;
sm_x = ($ (fereastră) .width () - sm_bg_w) / 2 + sm_shift;
$ (Sm_bg_block) .css ( 'stânga', sm_x);
$ (Sm_menu) .each (funcția ()
$ (Aceasta) .css ( 'stânga', sm_x + sm_x_crd [sm_i]);
sm_i ++;
>);
var $ meniu = $ ( «# meniul»);
$ (Fereastră) .scroll (funcția () if ($ (aceasta) .scrollTop ()> 100 $ Menu.hasClass ( «default»)) $ menu.removeClass ( «default») addClass ( «fix») .;
> Else if ($ (aceasta) .scrollTop () <= 100 && $menu.hasClass("fixed")) $menu.removeClass("fixed").addClass("default");
>
>); // scroll
>);
Așa cum am înțeles ai nevoie de un alt cod cu articolul dvs. și doriți să-l adăugați după eticheta corpului, și apoi derulați în jos blocul de pagină este apt strâns la (decalat) până la frontiera de sus a paginii, pentru a regla te rog, dacă am greșit, eu sunt doar nouă la acest de fapt, sper pentru ajutor.
Din păcate, lucrați prin proiectantul, poate că au sprijinul, care vă va ajuta. Eu nu sunt familiarizați cu ea și pentru a da mai mult decât este în articol nu poate despre codul și inserați-l în cazul în care
Ar trebui să spun. acest decalaj sunt sfătuiți să utilizeze comanda, și deci nu afectează aderența meniului static la marginea de sus a paginii când îl derulați
jos
Aici nu prea înțeleg ce se întâmplă) Acest meniu este implementat cu un CSS convențional și jQuery, aspectul codului la articol.
Dmitri, vă mulțumesc pentru codul de exemplu, acesta este salvat. Există încă o întrebare - pe pagina are deja un scenariu pe jQuery - pentru o fotografie mărită (fancybox) cu propriul dosar cu fișierele bibliotecă. Când încercați să vă înregistrați pe o pagină de cod de meniu fix apare unele „conflicte script“ - oprește lucru al fancybox - fotografie deschisă într-o fereastră separată. Ieși din link-ul de pagină la biblioteca din meniul fix - fancybox lucrărilor și după meniul de defilare inverse „Sticks“ în starea de extindere și nu vor fi returnate la locul său pe pagină. În ceea ce poate fi cazul, nu-i spui? Multumesc anticipat.
Bine ai venit, din păcate, nu cere, deoarece faptul că ați descris poate fi o mulțime de motive. Dar, cel mai probabil, doar un bug în script-ul pentru a deschide o consolă în browser-ul, și să vedem ce scrie despre el sau să dea un link către site-ul mă uit la ea)
Acesta va fi corect pentru a găsi în fișierul script partea care schimbă starea meniului și ștergeți-l.
Sau pur și simplu eliminați stiluri pentru un meniu fix de stat .fixeddiv
Prompt, te rog, că trebuie să înlocuiască în script-ul pentru a-l adapta la jv_chao șablon?
var meniu $ = $ ( «# jv-MainMenu»);
$ (Fereastră) .scroll (funcția () în cazul în care ($ (aceasta) .scrollTop ()> $ header.height (); $ Menu.hasClass ( «default»)) $ menu.removeClass ( «default») addClass ( «fix») .;
> Else if ($ (aceasta) .scrollTop () <= $header.height(); && $menu.hasClass("fixed")) $menu.removeClass("fixed").addClass("default");
>
>); // scroll
>);
astfel trebuie să fie?
Bine ai venit domnilor. Întrebări ... și în procesul de căutare a sudbinushka Internet adus la tine. În Java nu nicherta înțeleg, dar tema campaniei și exemplul meniului de mai sus este aceeași cu întrebarea mea.
Există un magazin în site-ul de meniu kofe78.ru exact ca am nevoie (fără proiectare, dar UE)
Este de remarcat totul pe OpenCart.
Și am nevoie pentru a fixa prea OpenCart.
Dacă există o oportunitate de a arăta modul în care se face acest lucru va fi extrem de recunoscător. Chiar și lipsit de tact ...
În ceea ce am înțeles există un meniu are o poziție fixă, care este orizontală. Ce e de a face acest lucru dintr-un alt furișat.