Fiksna plutajuća bočna traka. Fiksni izgled s dva stupca Fiksna bočna traka

Zanimljivo, blok koji ostaje na jednom mjestu prilikom pomicanja zove se: "kreće", "plutajući", "kreće", "mobilni", "klizanje". A zapravo on "zaglavio", "popravljeno", "popravljeno" i nalazi se na određenom području zaslona monitora, bez obzira na stupanj pomicanja web stranice.

Početna varijanta kada ništa ne pluta

Početni podaci: blok je već pozicioniran. Ja imam ovako nešto s velikim podnožjem, ti imaš drugačije.

Kako napraviti blok (div, aside, itd.), popraviti zaglavlje, oglas, izbornik. Samo CSS

Plutajući blok koji se zamrzava preko podnožja ili drugog elementa. Čisti JavaScript bez jQueryja

Tako da plutajući blok ne nestane, ne ide u podnožje stranice, već se zaustavlja iznad navedenog elementa.

Element se lijepi samo dok se pomiče kroz drugi element

Da bi se element otkačio i zaustavio kada se polje članka završi. To jest, donji rub članka i strana moraju biti na istoj liniji.

Kako napraviti da se dva (neobavezna) bloka zalijepe u obje bočne trake

Dva ili više blokova su fiksirani jedan za drugim

Prilikom pomicanja prema dolje, prvi blok se zalijepi, kada roditelj završi, odlijepi se; drugi se zalijepi, kad roditelj završi, skida se; treći štapići, i tako dalje.

Ista stvar, samo sa zajedničkim roditeljem.

Plutajuća duga bočna traka bez razmaka

Prilikom pomicanja prema dolje, bočna traka se lijepi kada njezin donji rub dodirne donji rub prozora preglednika. Prilikom pomicanja prema gore, bočna traka ostaje kada njezin gornji rub dodirne gornji rub prozora preglednika. Postoji donja granica koju stupac doseže.

Na stranici je potreban plutajući blok (ili kako ga još nazivaju pokretni, fiksni, zaglavljeni) kako bi korisnik prilikom pomicanja stranice vidio jedan fiksni element u koji se najčešće postavlja reklama (teaseri, banneri ili kontekst).

Jao, pravila adsense-a nam to zabranjuju. Međutim, mnogi vlasnici stranica zanemaruju pravila na vlastitu odgovornost. Možda za to nisu ni kažnjeni, ali ne bih savjetovao da riskiraju.

U takve blokove smještam YAN, svoje teasere/bannere, a ponekad umjesto reklame, prikazujem slične postove ili neke korisne informacije za posjetitelja.

Recimo vam kako možete napraviti plutajući blok na svojoj web stranici.

Zadatak: učinite posljednji blok u bočnoj traci (bočnoj traci) plutajućim. Štoviše, tako da se zalijepi samo u trenutku kada korisnik dođe do njega pomicanjem, a ne odmah kada se stranica otvori. Također, blok bi se trebao "odlijepiti", dosezati podnožje (tj. ne preklapati ga).

Najradniji način

Postoji mnogo implementacija ljepljivog bloka, ali ne rade sve ispravno. Reći ću vam iz osobnog iskustva: ista metoda instalacije bloka može raditi na jednom mjestu, a dovratnici će se pojaviti na drugom.

Ispod je primjer plutajućeg bloka koji je radio na gotovo svim stranicama na koje sam ga instalirao. Nije bilo koza. Motor također nije važan (DLE, WordPress, LiveStreet itd.).

Zalijepite sljedeći HTML kod na željeno mjesto bočne trake:

$(prozor).scroll(function() (
var sb_m = 20; /* gornji i donji padding */
var mb = 300; /* visina podruma s marginom */
varst = $(prozor).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.visina () ;

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) ) ;
}
drugo(
sb.css(( "paddingTop" : 0 ) ) ;
}
}
} ) ;

U ovom kodu možete postaviti vrh, dno i visinu podnožja, tj. visina na kojoj bi se blok trebao zaustaviti.

Sada uključujemo JS. Da biste to učinili, napišite u odjeljku GLAVA:

Možete koristiti samu datoteku header.php tako da priložite ovaj kod između početne i završne oznake head i umotate ga u oznake skripte, na sljedeći način:

Također možete napisati ovaj kod u oznake skripte bilo gdje drugdje. Glavna stvar je da se učitava na pravim stranicama bloga. Na primjer, možete u footer.php prije završne oznake tijela.

Idemo sada izravno na ovaj kod. Ispada da se nakon 10 piksela od vrha relativno pozicioniranje zamjenjuje fiksnim (pogledajte članak na gornjoj poveznici). Ako je potrebno, u retku s else možete odabrati vrijednost koja nije nula za vrh, a zatim će se izbornik fiksiran na vrhu uvući od gornjeg ruba okvira za prikaz za ovu vrijednost piksela (po mom mišljenju, ovo je suvišno) .

Za razliku od originalnog koda, morao sam dodati i širinu: "100%", jer bi se inače smanjila veličina izbornika u širini, što je pokvarilo cijelu sliku.

Gledajte, radi jasnoće, dat ću HTML kod koji čini gornji izbornik u mom WordPress predlošku bloga (živi u mojoj datoteci header.php iz ):

U vašem predlošku, najvjerojatnije, izlaz stavki izbornika će se postaviti pomoću, na primjer, takve konstrukcije (funkcije), ali to nije poanta.

Funkcija wp_list_pages je, naravno, dobra (omogućuje vam da konfigurirate sortiranje, postavite iznimke, itd.), ali bolje je sve raditi ručno putem običnog Html-a, kao što je prikazano gore. IMHO.

Ovdje je važno shvatiti da je cijela stvar zaključena u divove spremnika, i to onaj najviši ima atribut id="navi". Ovdje ćemo se uhvatiti za to. Vidite u gornjem JS kodu da se pojavljuje dvaput #navi? Tu ćete morati staviti svoj ID umjesto #navi (ili klasu, koja, kao što se sjećate, nije napisana kroz mrežu, već kroz točku, na primjer, ovako: .menu).

Nakon toga, vaš bi izbornik trebao biti fiksiran u gornjoj poziciji prilikom pomicanja stranice za određeni broj piksela. Međutim, imao sam problem s činjenicom da se baš ovaj izbornik nije uvijek pojavljivao na vrhu elemenata stranice preko kojih je lebdio.

Ovo, vidite, nije dobro. Stoga sam morao malo ući u CSS kod i dodati vrijednost od 1000 za id #navi selektora:

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

Činjenica je da kada postavite jednu od tri vrste pozicioniranja pomoću položaja, tada ovaj element prestaje biti u interakciji s uobičajenim elementima HTML koda. Ali s drugim slično pozicioniranim, natjecat će se za poziciju "iznad ili ispod". z-index:1000 nam omogućuje da naš izbornik očito postavimo iznad svih ostalih blokova. Za detalje pročitajte gornji članak.

Kako napraviti plutajuću bočnu traku u WordPressu bez dodataka

Koristeći metodu opisanu u nastavku, možete učiniti da cijela bočna traka ili njezin dio pluta (ili drugim riječima, fiksirati na određenom mjestu u okviru za prikaz). Ako je ovo područje prilično malo i stane na jedan zaslon (čak i prijenosni uređaj), možete ga učiniti da sve lebdi.

Ali najčešće to neće biti slučaj, a bit će moguće prisiliti donji dio da pluta. Ako je bočna traka, kao u mom slučaju, neodvojivi monolit, tada možete sami stvoriti plutajući blok koristeći principe postavljene u temi dizajna koju koristite i postaviti ga ispod glavnog.

Sve sam to napravio brzo i bez da sam se baš mučio s navlakama i pronalaženjem optimalnog rješenja, jer sam iz svog bogatog iskustva eksperimenata naučio obrazac da što se više nadaš nekoj ideji, manja je vjerojatnost da će ona “pucati”. Pa, obrnuto. Općenito, još se nije imalo smisla mučiti, jer vjerojatnost da će se sve to ukorijeniti nije tako velika.

Pa sam samo uzeo za stvaranje donjeg bloka Pomaknuo sam gornji dio svoje glavne bočne trake (u predlošku sidebar.php), zatim ga premjestio s vrha na donji blok "Koristim ga za zaradu", a na kraju sam zaglavio ono što je bio kraj u glavnom blok. Ispalo je nesto ovako:

Pa, sada imam blok "Koristim za zaradu" premješten s gornjeg bloka bočne trake na donji. Ispostavilo se da nije fontana, ali za "privremeno" će to učiniti. Ostaje samo urediti sve to u JS datoteku s kodom i donji blok će početi plutati. JS kod izgleda ovako:

$(document).ready(function()(var br = $.preglednik; $(prozor).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((vrh: "52px", pozicija: "fiksno", margina lijevo: "760px")); ) inače ako ((br.msie) && (br.verzija<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Imajte na umu da umjesto .sidebar123 trebate zamijeniti svoju klasu ili ID vanjskog spremnika u kojem živi vaš donji blok bočne trake.

Ne razumijem dobro ovaj kod (ne znam JS), ali sve radi. Barem djelomično. Kada postavite fiksno pozicioniranje, izvješće je iz gornje lijeve točke. Stoga, s marginLeft: "760px" ovaj blok postavljam točno na razinu bočne trake (broj je dobiven "pokušajem i pogreškom").

Vrh vrijednosti: "52px" postavlja padding već plutajućeg bloka bočne trake od gornjeg ruba. Vrijednost vrha Međutim, imam došlo je do problema u slučaju da je ukupna visina glavne bočne trake bila manja od visine područja sadržaja. Tako nešto se pokazalo, na primjer, prilikom pregledavanja arhive naslova:

Sa stajališta CSS-a, razumijem zašto se to događa, ali sam bio previše lijen da razmišljam o popravku. Jednostavno sam morao odbiti prikazati ovaj plutajući blok bočne trake na takvim stranicama (tamo nije potreban).