Opravený plovoucí postranní panel. Opravené rozvržení se dvěma sloupci Opravený postranní panel

Zajímavé je, že blok, který při rolování zůstává na jednom místě, se nazývá: "stěhování", "plovoucí", "stěhování", "mobilní, pohybliví", "klouzání". A vlastně on "zaseknutý", "pevný", "pevný" a nachází se v určité oblasti obrazovky monitoru, bez ohledu na stupeň posouvání webové stránky.

Prvotní varianta, kdy nic neplave

Počáteční data: blok je již umístěn. Já mám něco takového s velkou patičkou, ty to máš jinak.

Jak opravit blok (div, aside atd.), záhlaví, reklamu, menu. Pouze CSS

Plovoucí blok, který zamrzne nad zápatím nebo jiným prvkem. Čistý JavaScript bez jQuery

Aby plovoucí blok nezmizel, nepřešel do zápatí webu, ale zastavil se nad zadaným prvkem.

Prvek se drží pouze při procházení jiným prvkem

Aby se prvek odpojil a zastavil, když pole článku skončí. To znamená, že spodní okraje článku a strany musí být na stejném řádku.

Jak zajistit, aby se dva (volitelné) bloky přilepily na obě boční lišty

Dva nebo více bloků jsou upevněny jeden po druhém

Při rolování dolů se první blok přilepí, když rodič skončí, odlepí se; druhá se přilepí, když rodič skončí, odlepí se; třetí tyčinky a tak dále.

To samé, jen se společným rodičem.

Plovoucí dlouhý postranní panel bez mezer

Při posouvání dolů se boční panel přilepí, když se jeho spodní okraj dotkne spodního okraje okna prohlížeče. Při posouvání nahoru se boční panel přilepí, když se jeho horní okraj dotkne horního okraje okna prohlížeče. Existuje spodní hranice, které sloupec dosáhne.

Plovoucí blok (nebo jak se také nazývá pohyblivý, pevný, přilepený) je na webu potřeba, aby uživatel při rolování stránky viděl jeden pevný prvek, ve kterém je nejčastěji umístěna reklama (teasery, bannery nebo kontext).

Bohužel, pravidla adsense nám to zakazují. Mnoho majitelů stránek však pravidla ignoruje na vlastní nebezpečí. Možná za to ani nejsou trestáni, ale nedoporučoval bych riskovat.

Do takových bloků umisťuji YAN, své upoutávky/bannery a občas místo reklamy zobrazím podobné příspěvky nebo nějaké užitečné informace pro návštěvníka.

Řekneme vám, jak můžete na svém webu vytvořit plovoucí blok.

Úkol: učinit poslední blok v postranním panelu (sidebar) plovoucím. Navíc tak, aby se nalepil až v momentě, kdy se k němu uživatel posunem dostane, a ne hned při otevření stránky. Také by měl blok „odlepit“ a dosáhnout zápatí (tj. nepřekrývat jej).

Nejpracovnější způsob

Existuje mnoho implementací lepivého bloku, ale ne všechny fungují správně. Z osobní zkušenosti vám řeknu: stejná metoda blokové instalace může fungovat na jednom webu a zárubně se objeví na jiném.

Níže je uveden příklad plovoucího bloku, který fungoval téměř na každém webu, na který jsem jej nainstaloval. Nebyly tam žádné kozy. Engine také není důležitý (DLE, WordPress, LiveStreet atd.).

Vložte následující HTML kód do požadovaného umístění postranního panelu:

$(okno).scroll(funkce() (
var sb_m = 20 ; /* horní a spodní polstrování */
var mb = 300; /* výška suterénu s okrajem */
varst = $(okno).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" );
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height () ;

If(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop" : h) );
}
jiný(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

V tomto kódu si můžete nastavit horní, spodní a výšku vašeho zápatí, tzn. výška, ve které se má blok zastavit.

Nyní zahrneme JS. Chcete-li to provést, napište do sekce HEAD:

Samotný soubor header.php můžete použít tak, že tento kód vložíte mezi otevírací a zavírací tag head a zabalíte ho do tagů skriptu, například:

Tento kód můžete také napsat do značek skriptu kdekoli jinde. Hlavní věc je, že se načte na správných stránkách blogu. Můžete například v footer.php před koncovou značkou body.

Nyní pojďme přímo k tomuto kódu. Ukazuje se, že po 10 pixelech shora je relativní umístění nahrazeno pevným (viz článek na výše uvedeném odkazu). Pokud je to nutné, můžete v řádku s else zvolit pro top jinou hodnotu než nulu, a pak se nabídka fixovaná nahoře odsadí od horního okraje výřezu o tuto hodnotu pixelu (podle mého názoru je to zbytečné) .

Na rozdíl od původního kódu jsem musel přidat i šířku: "100%", protože jinak by se velikost menu na šířku zmenšila, což kazilo celý obrázek.

Podívejte se, pro jasnost dám Html kód, který tvoří horní nabídku v mé šabloně blogu WordPress (je v mém souboru header.php z ):

Ve vaší šabloně bude nejspíš výstup položek menu nastaven pomocí např. takové konstrukce (funkce), ale o to nejde.

Funkce wp_list_pages je samozřejmě dobrá (umožňuje konfigurovat řazení, nastavovat výjimky atd.), ale lepší je dělat vše ručně přes obyčejné Html, jak je ukázáno výše. IMHO.

Zde je důležité pochopit, že celá záležitost je uzavřena do kontejneru divs, a to nejvyšší má atribut id="navi". Tady se toho budeme držet. Ve výše uvedeném kódu JS vidíte, že se vyskytuje dvakrát #navi? Budete tam muset uvést své ID místo #navi (nebo třídy, která, jak si pamatujete, se nepíše přes mřížku, ale přes tečku, například takto: .menu).

Poté by měla být vaše nabídka při posouvání stránky o určitý počet pixelů pevně nastavena na horní pozici. Měl jsem však problém s tím, že právě toto menu se ne vždy objevilo na prvcích stránky, nad kterými se vznášelo.

Vidíš, to není dobré. Proto jsem se musel trochu dostat do kódu CSS a přidat s hodnotou 1000 pro id selektoru #navi:

#navi(background:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -10px;height:31px;z-index:1000 )

Faktem je, že když nastavíte jeden ze tří typů polohování pomocí Position, pak tento prvek přestane interagovat s obvyklými prvky Html kódu. Ale s ostatními podobně umístěnými bude soutěžit o pozici „nad nebo pod“. z-index:1000 nám umožňuje umístit naše menu zjevně nad všechny ostatní bloky. Podrobnosti si přečtěte v článku výše.

Jak vytvořit plovoucí postranní panel ve WordPressu bez pluginů

Pomocí níže popsané metody můžete celý postranní panel nebo jeho část nechat plavat (nebo jinými slovy zafixovat na určitém místě ve výřezu). Pokud je tato oblast docela malá a vejde se na jednu obrazovku (dokonce i na přenosné zařízení), můžete to celé nechat plavat.

Nejčastěji to tak ale nebude a spodní část bude možné přinutit k plavání. Pokud je postranní panel, jako v mém případě, neoddělitelným monolitem, můžete si sami vytvořit plovoucí blok pomocí principů stanovených v motivu designu, který používáte, a umístit jej pod hlavní.

To vše jsem udělal rychle a bez toho, abych se opravdu trápil kudrlinkami a hledáním optimálního řešení, protože ze svých bohatých zkušeností z experimentů jsem se naučil, že čím více do nějakého nápadu vkládáte naděje, tím menší je pravděpodobnost, že „vystřelí“. No, naopak. Obecně se zatím nemělo smysl obtěžovat, protože pravděpodobnost, že se to všechno zakoření, není tak velká.

Tak jsem jen vzal k vytvoření spodního bloku Přesunul jsem horní část mého hlavního postranního panelu (v šabloně sidebar.php), poté jsem jej přesunul z horního do spodního bloku „Používám ho k vydělávání peněz“ a nakonec jsem do hlavního zapíchl to, co byl konec blok. Ukázalo se něco takového:

Nyní mám blok „Používám pro výdělky“ přesunutý z horního bloku postranního panelu do spodního. Ukázalo se, že to není fontána, ale pro "dočasné" to bude stačit. Zbývá pouze toto vše uspořádat do JS souboru s kódem a spodní blok se začne vznášet. JS kód vypadá takto:

$(document).ready(function()( var br = $.browser; $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(".sidebar123").css((top: "52px", pozice: "fixed", marginLeft: "760px")); ) else if ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Všimněte si, že místo .sidebar123 musíte nahradit svou třídu nebo ID vnějšího kontejneru, ve kterém sídlí váš spodní blok postranního panelu.

Tomuto kódu moc nerozumím (neznám JS), ale vše funguje. Alespoň částečně. Když nastavíte pevné umístění, sestava je z levého horního bodu. Proto s marginLeft: "760px" umístím tento blok přesně na úroveň postranního panelu (číslo bylo získáno "pokusem a omylem").

Hodnota top: "52px" nastavuje odsazení již plovoucího bloku postranního panelu od horního okraje. Hodnota top Nicméně mám vyskytl se problém v případě, že celková výška hlavního postranního panelu byla menší než výška oblasti obsahu. Taková věc se dostala ven například při prohlížení archivu nadpisů:

Z pohledu CSS chápu, proč se to děje, ale byl jsem líný přemýšlet o opravě. Jen jsem musel odmítnout zobrazovat tento plovoucí blok postranního panelu na takových stránkách (není to tam potřeba).