Gör en fast meny när du rullar på sidan. Fast meny när man rullar på sidan. Hur man fixar toppmenyn i WordPress

Som hittas allt oftare på sidorna i bloggar och andra resurser. Användningen av sådana navigeringsfält är ganska berättigad. En av de främsta anledningarna till den aktiva användningen av dessa jQuery-plugins är att menyn alltid finns till besökarens fingertoppar, även om den är längst ner på sidan. Dessutom tar en fast meny liten plats och distraherar inte uppmärksamheten från huvudinnehållet. Generellt sett förbättrar en fast meny webbplatsens användbarhet.
Jag har satt ihop en samling av de bästa, enligt min mening, gratis jQuery-plugins för att implementera en fast meny. Jag försökte se till att vart och ett av plugins var unikt på något sätt, så att alla plugin från urvalet kunde användas specifikt i ditt projekt. I samlingen kan du hitta både enkla och mer komplexa plugins med animation m.m.
Om du behöver en väldigt enkel fast meny, något som hur vi implementerade en klibbig panel med sociala knappar, kan du klara dig utan jQuery-plugins, eftersom det inte är särskilt bra att ladda sidan med skript, men vi kommer att prata om detta i följande artiklar. Prenumerera på vår kanal eller sidor för att inte missa intressant material.
Så. Här är 6 jQuery-plugins för att skapa en fast meny.

Auto-Hide Sticky HeaderjQuery fixat navigeringsplugin, som fungerar på en liknande princip som skriptet ovan, men mindre smidigt, även om det vid första anblicken är lite lättare. Tyvärr kan jag inte säga att navigeringen är helt anpassningsbar, eftersom menyalternativen på små skärmar bara blir siffror, vilket är väldigt konstigt.

On Scroll Header EffectsKraftigt jQuery-plugin för fast navigeringsfält. Du kan ställa in vissa segment på sidan när du rullar, när den når vilka panelen förvandlas och kan ändras helt utseende. Det kan finnas hur många sådana segment som helst på en sida.

On-Scroll Animated Header Ett bra plugin för att implementera ett klibbigt navigeringsfält. Det fungerar så här: i början av sidan ser vi en hög rubrik som innehåller logotypen och menyn. När du rullar minskar rubrikområdet med alla element, inklusive logotypen och navigeringen, smidigt med hjälp av egenskaper och blir en smal remsa som klistras överst på skärmen.

Hej kära läsare av bloggsidan. Det här är mer en anteckning till mig själv, för att inte glömma vad jag gjorde när jag vill lämna tillbaka allt. Allt började med att en av läsarna föreslog att skriva om ett plugin för WordPress som heter Q2W3 Fixed Widget (Sticky Widget), som kan få vilken widget som helst i sidofältet att flyta eller, med andra ord, fixa.

De där. När du rullar på sidan ser du att huvuddelen av sidofältet kommer att gå upp, men widgeten som kommer att finnas längst ner kommer att finnas kvar i visningsområdet oavsett hur långt du flyttar ner i texten. Jag ska genast säga vad jag ska posta kontextuell reklam detta är förbjudet och kan straffas för det (som det visade sig i kommentarerna - YAN tillåter detta, men Adsense förbjuder att göra detta).

Insticksprogrammet är bra, men widgets är inaktiverade i mitt tema, så jag bestämde mig denna uppgift med några rader JavaScript-kod som jag hittade på Internet.

Som ett resultat är min toppmeny fixerad högst upp i visningsporten (i själva verket räckte bara CSS-kod för detta, men vi letar inte efter enkla sätt), och Nedre delen Sidofältet är fixerat längst upp till höger på skärmen när du når det medan du rullar på sidan. Jag vet inte om detta kommer att vara till någon nytta, men lösningen är väldigt enkel.

Varför fixa menyn och göra en flytande sidofält?

Varför fixa toppmenyn, frågar du dig? Tja, i allmänhet är detta ett litet experiment på ämnet förbättring. Rent hypotetiskt kan vi anta att detta kan orsaka en ökning av antalet visade sidor och den tid som användaren spenderar på sajten.

Å andra sidan kan den överdrivna påträngningen hos en sådan fast panel orsaka en negativ reaktion från läsarna, så frågan om användbarheten av denna åtgärd förblir öppen. Du måste titta på resultatet efter en veckas användning - om menyn inte längre är fixerad (spikad till den övre kanten av visningsområdet), då var experimentet ett misslyckande. För säkerhets skull ska jag ta en skärmdump av hur det hela hände.

En flytande sidofält i WordPress är gjord av en lite annan anledning – för att locka mer uppmärksamhet till något. I princip kan du här infoga både en lista med kategorier och en lista över populära eller senaste inlägg, som återigen kommer att försöka tjäna uppgiften att förbättra beteendemässiga sådana. Men oftast placeras reklam i ett sådant flytande block (kontextuell reklam är inte tillåten, som jag redan nämnt), vilket rent hypotetiskt borde öka webbmasterns inkomst. Låt oss se resultatet om en vecka.

Hur man fixar toppmenyn i WordPress

Jag hittade en lösning för mig själv på den här sidan - hur man fixar ett block eller en meny på en webbplats. För användning den här metoden måste anslutas jQuery bibliotek. Hur man gör detta beskrevs i detalj i artikeln om att ladda innehåll.

Om du kommer ihåg, i artikeln om att optimera sidladdningshastighet, måste du försöka kombinera alla CSS och JS till en gemensam (i betydelsen två - en för stilar och den andra för skript). Så faktiskt, jag lade till kodraderna som anges precis nedan till en sådan fil. Även om du kan lägga till dem direkt till HTML-kod, omgiven av skripttaggar. Detta kan till exempel göras i header.php-mallen inuti head-taggarna.

Du kan också fixa toppmenyn med hjälp av ren CSS- att hjälpa oss. Egentligen används positionering även här med detta CSS-egenskaper, men det blir också möjligt att börja visa en fast meny inte direkt, utan en tid efter att rullningen börjar (på ett visst avstånd från toppen).

I mitt fall ser koden för att fixa toppmenyn ut så här:

$(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Låt mig påminna dig om att du kan klistra in denna kodbit i:

  • En fil med tillägget .js som finns i mappen med det tema du använder (/wp-content/themes/theme). Den är endast lämplig för dig om en rad är skriven för den i header.php-filen för att ladda den tillsammans med webbsidorna på din webbplats, som kan se ut så här:
  • Du kan använda själva filen header.php, avslutningsvis denna kod mellan de öppnande och avslutande head-taggarna och linda in den i skripttaggar, till exempel så här: $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (topp< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Du kan också skriva den här koden i skripttaggar på vilken annan plats som helst. Huvudsaken är att den laddar på rätt sidor blogg. Du kan till exempel göra det i footer.php före den avslutande body-taggen.

    • Låt oss nu titta direkt på den här koden. Det visar sig att 10 pixlar från toppen relativ positionering ersätts av en fast (se artikeln på länken ovan). Om det behövs, i raden med else kan du välja icke-noll som värde för topp, och sedan kommer menyn som är fixerad längst upp att dra sig tillbaka från den övre kanten av visningsporten med givet värde pixlar (enligt min mening är detta onödigt).

    Till skillnad från originalkoden var jag också tvungen att lägga till bredd: "100%", för annars skulle menystorleken minska i bredd, vilket skulle förstöra hela bilden.

    Titta, för tydlighetens skull kommer jag att tillhandahålla HTML-koden med vilken toppmenyn bildas i min WordPress mall blogg (den finns i min header.php-fil från ):

    I din mall kommer visningen av menyalternativ troligen att specificeras med hjälp av till exempel en sådan konstruktion (funktion), men detta är inte viktigt.