Menuen er fast, når der scrolles og strækkes. Hvordan kan jeg låse et lag, så det forbliver ét sted, når jeg ruller siden? Sådan laver du en bundfast menu

Når du opretter en hjemmeside, er der ofte behov for at holde øje med den vandrette menu, som indeholder hjemmesidens hovednavigation. Metoden til at "fikse" den vandrette menu er praktisk set fra den besøgendes synspunkt, som "altid har navigation ved hånden", uanset hvor meget du drejer hjulet ned eller op.

Ret den vandrette menu med CSS: position:fixed

På den ene side er alt enkelt og nemt at løse ved hjælp af CSS på ingen tid. Eksempel på HTML-layout af en fast vandret menu:

hjem
Nyheder
Kontaktpersoner
Søg

[sideindhold] [sidefod]

CSS-layout af en fast vandret menu:

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

Lad os nu indstille indrykket for sideindholdet til højden af menuen:

#content ( margin-top: 30px; )

Og nu er det "næsten" lykkedes. Menuen er altid synlig for den besøgende. Men hvad skal vi gøre, hvis vi har en site-header i vores design, efterfulgt af selve menuen, og i headeren har vi et logo, site-motto og bannere.

Nå, vi kan rette sidehovedet ved at gøre indholdets indrykning lig i højden med overskriften og menuen sammen med indrykket mellem dem. Men der opstår et problem. Vi begrænser markant visningspladsen for vores besøgende til at se sideindhold. Muligheden for at opgive kasketten passer slet ikke os.

Rette en vandret menu ved hjælp af javascript

Så lad os overveje muligheden, når menuen "går" bag sidehovedet, men hvis den besøgende aktivt ruller ned, er menuen "fast" øverst og forbliver på plads. Siteheaderen er ikke synlig. Hvis den besøgende vender tilbage til sidehovedet, "bliver" menuen på sin plads "bag sidehovedet". Til at begynde med er her det komplette HTML-layout af et eksempel på sidelayout:

Website logo Hjemmeside slogan Banner

hjem
Nyheder
Kontaktpersoner
Søg

[sideindhold] [sidefod]

Vores hjemmesideskabelon består af flere typiske områder:

sideoverskrifter – #header, højde 150px
vandret menu – #menu-top-næsten-fast– højde 30px,
hovedinformationsområde på siden – #indhold,
sidefod - #sidefod.

Her er CSS-layoutet:

#menu-top-almost-fixed( position: fast; margin: 0; venstre: 0; top: 150px; højde: 30px; ) #header( display: blok; højde: 150px; overløb: skjult; position: relativ; margin -bund: 55px; ) #menu-top-næsten-fast ul, #menu-top-næsten-fixed li( liste-stil: ingen; margin: 0; udfyldning: 0; ) #menu-top-næsten-fast ul ( display: blok; tekst-align: center; width: 100%; float: left; ) #menu-top-almost-fixed ul li( display: inline; line-height: 30px; width: 120px; polstring: 0 5px ; tekst-align: center;)

Lad os først sætte et indrykning fra overskriften til indholdet svarende til højden af vores menu + en lille indrykning med en margen for æstetisk skønhed. #header ( margin-bottom: 55px; ) . Lad os rette vores menu lige bag overskriften: #menu-top-almost-fixed( position: fixed; margin: 0; left: 0; top: 150px; height: 30px; ) .

Lad os nu sikre os, at når du scroller, "retter" menuen sig nøjagtigt øverst på siden. Lad os sætte følgende javascript mellem og:

Javascript:

Du kan se et eksempel på implementeringen ved at følge dette link og bruge rullehjulet. Så alt er enkelt her. I indstillingerne sender vi følgende parametre til scriptet:

var ml = 150; - sidehovedhøjde i pixels,
var m2 = 2; - indrykning, når overskriften ikke længere er synlig, mens du ruller,
var menuID = "menu-top-næsten-fast"; - id for den vandrette menu for at fastgøre,
var menuOpacityOnChange = "0.7"; - menugennemsigtighed ved rulning:
- 1 - uigennemsigtig
- 0,5 – gennemskinnelig
- 0,0 - helt gennemsigtig

I denne version har vi "tunet" vores menu lidt, og når vi scroller, tilføjer vi gennemsigtighed til den. En mere klassisk mulighed foreslår umiddelbart sig selv, når vi ikke ændrer menuens gennemsigtighed, men blot laver en baggrund til menuen i form af en baggrund med menufarven og en lavere gennemskinnelig kant (hvor gradienten jævnt "overgår ” fra en uigennemsigtig farve til en gennemsigtig):

Lad os ændre lidt CSS-layout til vores horisontale faste menu:

#menu-top-almost-fixed( position: fixed; margin: 0; left: 0; top: 150px; height: 30px; background: url(./images/white-gradient-l.png) bottom left repeat-x ;)

Lad os nu give den ændrede javascript-kode, som vi placerer mellem og:

Javascript:

Så alt er enkelt her. I indstillingerne sender vi følgende parametre til scriptet:

var ml = 150; - sidehovedhøjde i pixels,
var m2 = 0; - indrykning, når overskriften ikke længere er synlig under rulning.

Menuen fungerer fint, men hvis du genindlæser siden, vises menuen med første indrykning

Hvis der er et sådant problem, skal du ringe til menuen efter at have indlæst siden én gang. For at gøre dette skal du ændre funktionsopkaldskoden fra:

Funktion 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:

Efter at siden er indlæst, kalder vi straks vores marginMenuTop-funktion, som kontrollerer menuens position på siden og anvender den ønskede stil

Implementering af en delvist fast menu ved hjælp af Afixx jQuery plugin fra Twitter Bootstrap

I forlængelse af dette emne blev der skrevet en artikel til dig om implementering af en næsten fast menu ved hjælp af jQuery Affix plugin fra Twitter Bootstrap frameworket.

Det første, vi vil gøre, er at indsætte vores HTML-kode på det sted på dit websted, hvor du vil se menuen.

hjem
WordPress
HTML5&CSS3
PHP

Menuen tildeles standardklassen, takket være hvilken vores jquery så kan bestemme, at netop denne blok så skal fastgøres til toppen.

2. jQuery-kode

Indsæt koden i headeren før det afsluttende hoved. Som jeg skrev ovenfor, definerer den en blok med klassestandard, og efter at have rullet tildeler den den klasse fixed . Du kan ændre klassenavnene, hvis du har brug for det. Men vær bare forsigtig og gå ikke glip af noget, ellers holder alt simpelthen op med at fungere. Du skal ændre i jQuery, HTML og CSS.

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

Bemærk venligst, at hvis der er enkelte anførselstegn i koden, der er indesluttet i ekko "", skal de escapes, dvs. sæt en omvendt skråstreg (\") foran hver af dem, selvfølgelig uden parentes.

Generelt blev det, som det blev. Du bliver nødt til selv at beslutte, hvordan du specifikt knytter dette til dit emne - når du har tid, er det endda sjovt at "rappe din hjerne." Tak skal du have.

Held og lykke! Vi ses snart på bloggens sider

Du kan være interesseret

WebPoint PRO er et responsivt WordPress-tema med bred funktionalitet og kompetent teknisk søgemaskineoptimering
Share42 - et script til at tilføje sociale netværksknapper og bogmærker til webstedet (der er en mulighed for flydende panel)

Som findes oftere og oftere på siderne af blogs og andre ressourcer. Brugen af sådanne navigationsbjælker er ganske berettiget. En af hovedårsagerne til den aktive brug af disse jQuery plugins er, at menuen altid er lige ved den besøgendes fingerspidser, selvom den er nederst på siden. Derudover fylder en fast menu kun lidt og distraherer ikke opmærksomheden fra hovedindholdet. Generelt set forbedrer en fast menu webstedets brugervenlighed.
Jeg har sammensat en samling af de bedste, efter min mening, gratis jQuery-plugins til implementering af en fast menu. Jeg forsøgte at sikre, at hvert af plugins var unikt på en eller anden måde, så ethvert plugin fra udvalget kunne bruges specifikt i dit projekt. I samlingen kan du finde både simple og mere komplekse plugins med animation mv.
Hvis du har brug for en meget enkel fast menu, noget som hvordan vi implementerede et klæbrig panel med sociale knapper, kan du undvære jQuery-plugins, fordi indlæsning af siden med scripts ikke er særlig god, men vi vil tale om dette i de følgende artikler. Abonner på vores kanal eller sider for ikke at gå glip af interessante materialer.
Så. Her er 6 jQuery-plugins til at lave en fast menu.

Auto-Hide Sticky HeaderjQuery fikseret navigationsplugin, som fungerer på et lignende princip som scriptet ovenfor, men mindre glat, selvom det ved første øjekast er lidt lettere. Desværre kan jeg ikke sige, at navigationen er fuldt adaptiv, da menupunkterne på små skærme kun bliver til tal, hvilket er meget mærkeligt.

On Scroll Header EffectsKraftfuldt jQuery-plugin til fast navigationslinje. Du kan indstille bestemte segmenter på siden, når du ruller, hvorefter panelet transformeres og fuldstændigt kan ændre dets udseende. Der kan være et hvilket som helst antal af sådanne segmenter på en side.

On-Scroll Animated Header Et godt plugin til at implementere en klæbrig navigationslinje. Det fungerer sådan her: I begyndelsen af siden ser vi en høj overskrift, der indeholder logoet og menuen. Når du ruller, formindskes sidehovedområdet med alle elementer, inklusive logoet og navigationen, jævnt ved hjælp af egenskaber og bliver til en smal strimmel, der klæber til toppen af skærmen.

I dag fikser vi menuen, når vi ruller på siden, lad os se på den bedste implementeringsmulighed.

Hvordan fikser vi menuen?

Der er 2 måder at rette menuen på:

Ret kun menuen, hvis siden er rullet nok ned
Ret menuen permanent

Retter menuen, når du ruller på siden

Denne metode kræver JS og CSS. Først skal vi bestemme, hvor langt siden er rullet ned, og derefter, hvis denne værdi er større end en bestemt værdi (for eksempel større end skærmstørrelsen), vil vi rette menuen. Lad os 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(" fast "); ) ));

Det vil sige, at når vi scroller siden, tjekker vi "om mængden af scrollning på siden er større end højden af vinduet", og hvis den er større, tilføjer vi den faste klasse til vores menu (og angiver højde og bredde, fordi, når du bruger position: fast, går blokdimensionerne tabt), ellers skal du slette denne klasse.

Fixed( position: fixed; top:0; left: 0; )

Det vil sige, at hvis en sådan klasse er til stede, vil objektet blive fast.

Parat. Menuen vil kun holde sig, når brugeren ruller siden mere end skærmstørrelsen. Selvfølgelig kan du rette menuen, efter at brugeren har rullet siden efter mængden af selve menuen eller med en forudbestemt værdi.

Vi ordner altid menuen (anden mulighed for fiksering)

Til denne metode har vi bare brug for CSS. Vi fikser menuen permanent, og hvis det ønskes, laver vi et topindryk ved brødteksten, så menuen ikke overlapper med resten af indholdet, når der scrolles til nul.