Menyen er fast ved rulling og strekk. Hvordan kan jeg låse et lag slik at det forblir på ett sted når jeg ruller siden? Hvordan lage en fast meny nederst

Når du oppretter et nettsted, er det ofte behov for å holde oversikt over den horisontale menyen, som inneholder hovednavigasjonen til nettstedet. Metoden for å "fikse" den horisontale menyen er praktisk fra den besøkendes synspunkt, som "har navigasjon alltid for hånden", uansett hvor mye du dreier hjulet ned eller opp.

Fikser den horisontale menyen med CSS: posisjon:fast

På den ene siden er alt enkelt og lett å løse ved hjelp av CSS på kort tid. Eksempel på HTML-layout for en fast horisontal meny:

hjem
Nyheter
Kontakter
Søk

[sideinnhold] [sidebunntekst]

CSS-oppsett av en fast horisontal meny:

# menu-top-almost-fixed( posisjon: fast; topp: 10px; venstre: 0; høyde: 30px; bredde: 100%; margin: 0; )

La oss nå sette innrykk for sideinnholdet lik høyden på menyen:

#content ( margin-top: 30px; )

Og nå har vi "nesten" lyktes. Menyen er alltid synlig for besøkende. Men hva skal vi gjøre hvis vi har en sideoverskrift i designet vårt, etterfulgt av selve menyen, og i overskriften har vi en logo, nettstedsmotto og bannere.

Vel, vi kan fikse sideoverskriften ved å gjøre innholdsinnrykk lik høyde med overskriften og menyen, sammen med innrykk mellom dem. Men det oppstår et problem. Vi begrenser visningsplassen betydelig for våre besøkende til å se sideinnhold. Alternativet til å forlate hetten passer ikke oss i det hele tatt.

Retting av en horisontal meny ved hjelp av javascript

Så la oss vurdere alternativet når menyen "går" bak sideoverskriften, men hvis den besøkende aktivt ruller nedover, er menyen "fikset" øverst og forblir på plass. Nettstedets overskrift er ikke synlig. Hvis den besøkende går tilbake til sideoverskriften, "blir" menyen på sin plass "bak sideoverskriften". Til å begynne med, her er det komplette HTML-oppsettet for et eksempel på sideoppsett:

Nettsidelogo Nettstedslagord Banner

hjem
Nyheter
Kontakter
Søk

[sideinnhold] [sidebunntekst]

Vår nettsidemal består av flere typiske områder:

sideoverskrifter – #Overskrift, høyde 150 px
horisontal meny – #meny-topp-nesten-fikset– høyde 30px,
hovedinformasjonsområdet på siden – #innhold,
sidebunntekst - #bunntekst.

Her er CSS-oppsettet:

#menu-top-almost-fixed( posisjon: fast; margin: 0; venstre: 0; topp: 150px; høyde: 30px; ) #header( display: block; height: 150px; overflow: skjult; posisjon: relativ; margin -bottom: 55px; ) #meny-topp-nesten-fiksert ul, #meny-topp-nesten-fiksert li( listestil: ingen; margin: 0; utfylling: 0; ) #meny-topp-nesten-fiksert ul ( display: block; text-align: center; width: 100%; float: left; ) #menu-top-nesten-fixed ul li( display: inline; line-height: 30px; width: 120px; padding: 0 5px ; tekstjustering: midtstilt;)

Først, la oss sette et innrykk fra overskriften til innholdet lik høyden på menyen vår + et lite innrykk med en margin for estetisk skjønnhet. #header ( margin-bottom: 55px; ) . La oss fikse menyen vår rett bak overskriften: #menu-top-almost-fixed( posisjon: fast; margin: 0; venstre: 0; topp: 150px; høyde: 30px; ) .

La oss nå sørge for at når du ruller, "fikser" menyen nøyaktig øverst på siden. La oss sette følgende javascript mellom og:

Javascript:

Du kan se et eksempel på implementeringen ved å følge denne lenken og bruke rullehjulet. Så alt er enkelt her. I innstillingene sender vi følgende parametere til skriptet:

var ml = 150; - toppteksthøyde i piksler,
var m2 = 2; - innrykk når overskriften ikke lenger er synlig mens du ruller,
var menuID = "meny-topp-nesten-fiksert"; - ID for den horisontale menyen for å feste,
var menuOpacityOnChange = “0.7”; - menygjennomsiktighet når du ruller:
- 1 - ugjennomsiktig
- 0,5 – gjennomskinnelig
- 0,0 - helt gjennomsiktig

I denne versjonen har vi "justert" menyen vår litt, og når vi ruller legger vi til gjennomsiktighet til den. Et mer klassisk alternativ foreslår umiddelbart seg selv når vi ikke endrer gjennomsiktigheten til menyen, men bare lager en bakgrunn for menyen i form av en bakgrunn med menyfargen og en nedre gjennomskinnelig kant (hvor gradienten jevnt "overgår" ” fra en ugjennomsiktig farge til en gjennomsiktig):

La oss endre litt CSS-layout for vår horisontale faste meny:

#menu-top-almost-fixed( posisjon: fast; margin: 0; venstre: 0; topp: 150px; høyde: 30px; bakgrunn: url(./images/white-gradient-l.png) repeter-x nederst til venstre ;)

La oss nå gi den modifiserte javascript-koden, som vi vil plassere mellom og:

Javascript:

Så alt er enkelt her. I innstillingene sender vi følgende parametere til skriptet:

var ml = 150; - toppteksthøyde i piksler,
var m2 = 0; - innrykk når overskriften ikke lenger er synlig under rulling.

Menyen fungerer fint, men laster du inn siden på nytt, vises menyen med første innrykk

Hvis det er et slikt problem, må du ringe menyen etter å ha lastet siden én gang. For å gjøre dette, endre funksjonsanropskoden fra:

Funksjon setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("scroll", marginMenuTop, false); ) else if(typeof window.attachEvent != "undefined")( window. attachEvent ( "onscroll", marginMenuTop); ) );

Til følgende kode:

Etter at siden er lastet, kaller vi umiddelbart marginMenuTop-funksjonen vår, som vil sjekke plasseringen av menyen på siden og bruke ønsket stil

Implementering av en delvis fast meny ved å bruke Afixx jQuery-plugin fra Twitter Bootstrap

I forlengelsen av dette emnet ble det skrevet en artikkel for deg om implementering av en nesten fast meny ved å bruke jQuery Affix-plugin fra Twitter Bootstrap-rammeverket.

Det første vi skal gjøre er å lime inn HTML-koden vår på stedet på nettstedet ditt der du vil se menyen.

hjem
WordPress
HTML5&CSS3
PHP

Menyen er tildelt standardklassen, takket være hvilken vår jquery kan bestemme at denne spesielle blokken da må festes til toppen.

2. jQuery-kode

I toppteksten, før avslutningshodet, setter du inn koden. Som jeg skrev ovenfor, definerer den en blokk med klassestandard, og etter rulling tilordner den den klassen fast . Du kan endre klassenavnene hvis du trenger det. Men bare vær forsiktig og ikke gå glipp av noe, ellers vil alt rett og slett slutte å fungere. Du må endre i jQuery, HTML og CSS.

$(document).ready(function())( var $menu = $("#menu"); $(window).scroll(function())( if ($(this).scrollTop() > 100 && $ menu. hasClass("standard"))( $menu.fadeOut("rask",funksjon())( $(this).removeClass("standard") .addClass("fast transbg") .fadeIn("rask") ; )) ; ) else if($(this).scrollTop()

Vær oppmerksom på at hvis det er enkle anførselstegn i koden som er omsluttet av ekko "", må de escapes, dvs. sette en omvendt skråstrek (\") foran hver av dem, uten parentes, selvfølgelig.

Generelt ble det som det ble. Du må bestemme selv hvordan du spesifikt skal knytte dette til emnet ditt - når du har tid, er det til og med morsomt å "ras hjernen din." Takk skal du ha.

Lykke til! Vi sees snart på sidene til bloggsiden

Du kan være interessert

WebPoint PRO er et responsivt WordPress-tema med bred funksjonalitet og kompetent teknisk søkemotoroptimalisering
Share42 - et skript for å legge til sosiale nettverksknapper og bokmerker til nettstedet (det er et flytende panelalternativ)

Som blir funnet oftere og oftere på sidene til blogger og andre ressurser. Bruken av slike navigasjonslinjer er ganske berettiget. En av hovedgrunnene til den aktive bruken av disse jQuery-pluginene er at menyen alltid er tilgjengelig for den besøkende, selv om den er nederst på siden. I tillegg tar en fast meny liten plass og distraherer ikke oppmerksomheten fra hovedinnholdet. Generelt sett forbedrer en fast meny brukervennligheten til nettstedet.
Jeg har satt sammen en samling av de beste, etter min mening, gratis jQuery-plugins for å implementere en fast meny. Jeg prøvde å sikre at hver av pluginene var unike på en eller annen måte, slik at enhver plugin fra utvalget kunne brukes spesifikt i prosjektet ditt. I samlingen kan du finne både enkle og mer komplekse plugins med animasjon osv.
Hvis du trenger en veldig enkel fast meny, noe som hvordan vi implementerte et klebrig panel med sosiale knapper, kan du klare deg uten jQuery-plugins, fordi det ikke er veldig bra å laste siden med skript, men vi vil snakke om dette i de følgende artiklene. Abonner på vår kanal eller sider for ikke å gå glipp av interessant materiale.
Så. Her er 6 jQuery-plugins for å lage en fast meny.

Auto-Hide Sticky HeaderjQuery fast navigasjonsplugin, som fungerer på et lignende prinsipp som skriptet ovenfor, men mindre jevnt, selv om det ved første øyekast er litt enklere. Dessverre kan jeg ikke si at navigasjonen er fullt adaptiv, siden menyelementene på små skjermer blir bare tall, noe som er veldig rart.

On Scroll Header EffectsKraftig jQuery-plugin for fast navigasjonslinje. Du kan angi bestemte segmenter på siden når du ruller, når panelet forvandles og kan endre utseendet fullstendig. Det kan være et hvilket som helst antall slike segmenter på en side.

On-Scroll Animated Header En god plugin for å implementere en klebrig navigasjonslinje. Det fungerer slik: helt i begynnelsen av siden ser vi en høy overskrift som inneholder logoen og menyen. Når du ruller, reduseres overskriftsområdet med alle elementer, inkludert logoen og navigasjonen, jevnt ved hjelp av egenskaper og blir en smal stripe festet til toppen av skjermen.

I dag fikser vi menyen når vi ruller siden, la oss se på det beste implementeringsalternativet.

Hvordan fikser vi menyen?

Det er 2 måter å fikse menyen på:

Rett opp menyen bare hvis siden har rullet nok ned
Fiks menyen permanent

Retting av menyen når du ruller siden

Denne metoden krever JS og CSS. Først må vi finne ut hvor langt siden har rullet nedover, og deretter, hvis denne verdien er større enn en viss verdi (for eksempel større enn skjermstørrelsen), vil vi fikse menyen. La oss se på et eksempel:

$(window).scroll(function())( var docscroll=$(document).scrollTop(); if(docscroll>$(window).height())( $("nav").css(("height) " : $("nav").height(),"width": $("nav").width())).addClass("fixed"); )else( $("nav").removeClass(" fikset "); ) ));

Det vil si at når vi ruller siden, sjekker vi "om mengden av rulling på siden er større enn høyden på vinduet", og hvis den er større, legger vi til den faste klassen i menyen vår (og spesifiserer høyden og bredden, fordi når du bruker posisjon: fast blokkdimensjonene går tapt), ellers slett denne klassen.

Fast (posisjon: fast; topp:0; venstre: 0; )

Det vil si at hvis en slik klasse er tilstede, vil objektet bli fikset.

Klar. Menyen vil bare holde seg når brukeren ruller siden mer enn skjermstørrelsen. Selvfølgelig kan du fikse menyen etter at brukeren har rullet siden etter mengden av selve menyen, eller etter en forhåndsbestemt verdi.

Vi fikser alltid menyen (andre fikseringsalternativ)

For denne metoden trenger vi bare CSS. Vi vil fikse menyen permanent, og om ønskelig vil vi lage et toppinnrykk ved brødteksten slik at når du ruller til null, overlapper ikke menyen med resten av innholdet.