Fiksna plavajoča stranska vrstica. Fiksna postavitev v dveh stolpcih. Fiksna stranska vrstica

Zanimivo je, da se blok, ki ostane na enem mestu med pomikanjem, imenuje: "premikanje", "plavajoči", "premikanje", "mobilni", "drsni". In pravzaprav on "zataknjeno", "popravljeno", "popravljeno" in se nahaja na določenem območju zaslona monitorja, ne glede na stopnjo drsenja po spletni strani.

Začetna varianta, ko nič ne plava

Začetni podatki: blok je že pozicioniran. Jaz imam nekaj takega z veliko nogo, ti imaš drugače.

Kako narediti blok (div, stran, itd.), popravljeno glavo, oglas, meni. Samo CSS

Plavajoči blok, ki zamrzne nad nogo ali drugim elementom. Čisti JavaScript brez jQueryja

Da plavajoči blok ne izgine, ne gre v nogo spletnega mesta, ampak se ustavi nad določenim elementom.

Element se drži samo med pomikanjem po drugem elementu

Da se element odklopi in ustavi, ko se polje artikla konča. To pomeni, da morata biti spodnji rob artikla in stran na isti črti.

Kako narediti, da se dva (neobvezna) bloka držita v obeh stranskih vrsticah

Dva ali več blokov je pritrjenih drug za drugim

Pri pomikanju navzdol se prvi blok drži, ko se starš konča, se odlepi; drugi se drži, ko se starš konča, se odlepi; tretji palice in tako naprej.

Enako, samo s skupnim staršem.

Plavajoča dolga stranska vrstica brez praznega prostora

Ko se pomikate navzdol, se stranska vrstica zatakne, ko se njen spodnji rob dotakne spodnjega roba okna brskalnika. Pri pomikanju navzgor se stranska vrstica zatakne, ko se njen zgornji rob dotakne zgornjega roba okna brskalnika. Obstaja spodnja meja, ki jo doseže stolpec.

Na spletnem mestu je potreben plavajoči blok (ali kot ga imenujemo tudi premikajoči se, fiksni, zataknjeni), da uporabnik ob pomikanju po strani vidi en fiksni element, v katerega je najpogosteje postavljeno oglaševanje (dražilke, pasice ali kontekst).

Aja, pravila adsense nam to prepovedujejo. Vendar pa mnogi lastniki spletnih mest ignorirajo pravila na lastno odgovornost. Morda za to niti niso kaznovani, a tvegati ne bi svetoval.

V takšne bloke umestim YAN, svoje teaserje/pasice in včasih namesto reklame prikažem podobne objave ali kakšno koristno informacijo za obiskovalca.

Povejmo vam, kako lahko na svojem spletnem mestu naredite plavajoči blok.

Naloga: naj zadnji blok v stranski vrstici (stranski vrstici) plava. Še več, tako da se drži le v trenutku, ko ga uporabnik doseže s pomikanjem, in ne takoj, ko se stran odpre. Prav tako naj se blok "lepi" in doseže nogo (tj. ne prekriva je).

Najbolj delujoč način

Obstaja veliko izvedb lepljivega bloka, vendar vse ne delujejo pravilno. Povedal vam bom iz osebnih izkušenj: enak način namestitve blokov lahko deluje na enem mestu, na drugi pa se bodo pojavili podboji.

Spodaj je primer plavajočega bloka, ki je deloval na skoraj vseh spletnih mestih, na katerih sem ga namestil. Ni bilo koz. Tudi motor ni pomemben (DLE, WordPress, LiveStreet itd.).

Prilepite naslednjo kodo HTML na želeno mesto stranske vrstice:

$(okno).scroll(funkcija() (
var sb_m = 20; /* zgornje in spodnje oblazinjenje */
var mb = 300; /* višina kleti z robom */
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)) ;
}
drugače (
sb.css(( "paddingTop": 0) );
}
}
} ) ;

V tej kodi lahko nastavite vrh, dno in višino noge, t.j. višina, na kateri naj se blok ustavi.

Zdaj vključujemo JS. Če želite to narediti, napišite v razdelku GLAVA:

Datoteko header.php lahko uporabite tako, da to kodo zaprete med začetno in končno oznako glave in jo zavijete v oznake skripta, na primer:

To kodo lahko napišete tudi v oznake skripta kjer koli drugje. Glavna stvar je, da se naloži na prave strani bloga. Na primer, lahko v footer.php pred zaključno oznako body.

Zdaj pa pojdimo neposredno na to kodo. Izkazalo se je, da se po 10 slikovnih pikah od vrha relativno pozicioniranje nadomesti s fiksnim (glej članek na zgornji povezavi). Če je potrebno, lahko v vrstici z else izberete vrednost, ki ni nič za vrh, nato pa se bo meni, pritrjen na vrhu, zamaknil od zgornjega roba vidnega polja za to vrednost slikovnih pik (po mojem mnenju je to odveč) .

Za razliko od originalne kode sem moral dodati še širino: "100%", ker bi se sicer velikost menija v širini zmanjšala, kar je pokvarilo celotno sliko.

Poglejte, zaradi jasnosti bom dal kodo Html, ki tvori zgornji meni v predlogi mojega spletnega dnevnika WordPress (živi v moji datoteki header.php iz ):

V vaši predlogi bo najverjetneje izhod elementov menija nastavljen s pomočjo, na primer, takšne konstrukcije (funkcije), vendar to ni bistvo.

Funkcija wp_list_pages je seveda dobra (omogoča vam, da konfigurirate razvrščanje, nastavite izjeme itd.), vendar je bolje, da vse naredite ročno prek navadnega Html-ja, kot je prikazano zgoraj. IMHO.

Tu je pomembno razumeti, da je celotna zadeva zaključena v vsebnik dive, in najvišji ima atribut id="navi". Tukaj se ga bomo oklepali. V zgornji kodi JS vidite, da se pojavi dvakrat #navi? Tam boste morali namesto #navi vpisati svoj ID (ali razred, ki, kot se spomnite, ni napisan skozi mrežo, ampak skozi piko, na primer takole: .menu).

Po tem naj bo vaš meni fiksiran v zgornjem položaju, ko se pomikate po strani za določeno število slikovnih pik. Vendar sem imel težavo z dejstvom, da se prav ta meni ni vedno pojavljal na vrhu elementov strani, nad katerimi je lebdel.

To, vidite, ni dobro. Zato sem se moral malo poglobiti v kodo CSS in dodati vrednost 1000 za id izbirnika #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 )

Dejstvo je, da ko nastavite eno od treh vrst pozicioniranja s funkcijo Position, potem ta element preneha delovati z običajnimi elementi kode Html. Toda z drugimi podobno pozicioniranimi se bo potegoval za položaj "nad ali spodaj". z-index:1000 nam omogoča, da svoj meni očitno postavimo nad vse druge bloke. Za podrobnosti preberite zgornji članek.

Kako narediti plavajočo stransko vrstico v WordPressu brez vtičnikov

S spodaj opisano metodo lahko celotno stransko vrstico ali njen del naredite lebdeti (ali z drugimi besedami, pritrdite na določeno mesto v vidnem polju). Če je to območje precej majhno in se prilega enemu zaslonu (tudi prenosni napravi), lahko vse skupaj lebdi.

A najpogosteje to ne bo tako in bo mogoče prisiliti spodnji del, da lebdi. Če je stranska vrstica, kot v mojem primeru, neločljiv monolit, potem lahko sami ustvarite plavajoči blok z uporabo načel, določenih v temi oblikovanja, ki jo uporabljate, in jo postavite pod glavno.

Vse to sem naredil hitro in ne da bi se zares obremenjeval z navezami in iskanjem optimalne rešitve, saj sem se iz svojih bogatih izkušenj s poskusi naučil vzorca, da bolj ko polagaš upanje na neko idejo, manjša je verjetnost, da bo »ustrelila«. No, obratno. Na splošno se še ni bilo smisla truditi, saj verjetnost, da se bo vse to ukoreninilo, ni tako velika.

Zato sem samo vzel da ustvarite spodnji blok Zgornji del svoje glavne stranske vrstice (v predlogi sidebar.php) sem premaknil z zgornjega na spodnji blok "Uporabljam ga za zaslužek" in na koncu zataknil tisto, kar je bilo konec, v glavni blok. Izkazalo se je nekako takole:

No, zdaj imam blok »uporabljam za zaslužek« premaknjen iz zgornjega bloka stranske vrstice na spodnji. Izkazalo se je, da ni vodnjak, ampak za "začasno" bo naredil. Ostaja samo, da vse to uredite v datoteki JS s kodo in spodnji blok bo začel plavati. JS koda izgleda takole:

$(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", položaj: "fixed", marginLeft: "760px")); ) drugače če ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Upoštevajte, da morate namesto .sidebar123 nadomestiti svoj razred ali ID zunanjega vsebnika, v katerem živi spodnji blok stranske vrstice.

Te kode ne razumem dobro (ne poznam JS), vendar vse deluje. Vsaj delno. Ko nastavite fiksno pozicioniranje, je poročilo od zgornje leve točke. Zato z marginLeft: "760px" ta blok postavim točno na nivo stranske vrstice (številka je bila pridobljena s "poskusom in napako").

Vrednost top: "52px" nastavi odmik že plavajočega bloka stranske vrstice od zgornje meje. Vrednost vrha Vendar pa imam prišlo je do težave v primeru, da je bila skupna višina glavne stranske vrstice manjša od višine območja vsebine. Kaj takega se je na primer pokazalo pri ogledu arhiva naslovov:

Z vidika CSS razumem, zakaj se to zgodi, vendar sem bil preveč len, da bi razmišljal o popravku. Moral sem samo zavrniti prikaz tega plavajočega bloka stranske vrstice na takih straneh (tam ni potreben).