Fiksēts bloks sānjoslā. Izlabota augšējā izvēlne un peldošā sānjosla pakalpojumā WordPress. Divi vai vairāki bloki tiek fiksēti viens pēc otra

Kādas ir prasības izkārtojumam:

• Gumijas divu kolonnu izkārtojums
• sānjoslas fiksēts platums 300 pikseļi
• saturs ir izstiepts visā atlikušajā platumā.
• kājene nospiesta apakšā (šajā nodarbībā es neparādīšu, kā tas tiek darīts).

Ja lika blokiem peldēt, jums ir jāpiešķir tiem fiksēts platums (jūs nevarat iestatīt 1 sānjoslu uz 300 pikseļiem un saturu uz 100%). Šādā gadījumā saturs tiks slīdēts uz leju, vai arī tiks parādīts horizontāls 300 pikseļu ritinājums pa kreisi. Nu, galvenais ir saprast, ka šī metode mums nav piemērota.

Daudzi maketētāji piedāvā šo metodi, par ko viņi vispār domā?! Metodes būtība ir tāda, ka varat iestatīt sānjoslu peldošu ar platumu 300, bet saturu nedrīkst peldēt un piešķirt tai margin-left:300px. Labs veids un viss šķiet tik labi. Godīgi sakot, es domāju, ka tas ir labākais veids, taču šai metodei ir savas nepilnības. Šīs metodes atteikšanās iemesls ir tas, ka, ja pēkšņi saturā mēs izkārtojam, piemēram, izvēlni ar peldošu li vai jebkādiem citiem peldošajiem blokiem, un pēc tam mēs vēlamies tos notīrīt, izmantojot clear:abi, tad šī bloka apakšējā robeža. slīd uz leju līdz sānjoslas apakšējās apmales līmenim (kas un tas nav dīvaini, jo pēda ir notīrīta, no tā var izvairīties, ja peldošajam blokam tiek piešķirts fiksēts augstums, bet tas nepavisam nav gadījumā ar fiksēta iestatīšanu augstums).

Sānjoslai varat izmantot absolūto pozīciju, bet tikai tad, ja esat pilnīgi pārliecināts, ka saturs būs lielāks par sānjoslu, pretējā gadījumā viss sānjoslas saturs uzkāps uz kājenes (galu galā absolūtā pozicionēšana to izņem no vispārējā plūsma).

bet man tas arī nav ļoti labs veids!

"Tā ir lieliska metode, ja tajā ir kādi trūkumi, lūdzu, komentējiet. Bet es domāju, ka tas ir labākais veids."

• Šīs metodes priekšrocības: pirmkārt, DOME saturs būs pirms sānjoslas, kas ir piemērots meklētājprogrammām.
• nekas neder kājenē
• visus blokus var notīrīt un nekas neslīdēs līdz apakšējai robežai (Tā mēs pārvarējām otrās metodes problēmas).

Kopumā, kā tas darbojas: apskatiet kodu, saturs ir pirmais, pēc tam sānjosla. iestatiet pludiņu uz šiem diviem blokiem (dabiski sānjosla slīd uz leju). pēc tam mēs iestatām sānjoslas rekvizītu margin-left: -100%. lieliski, tas ir atpakaļ vietā, un saturam tiek pievienota atkāpe ar margin-left:300px.

Vietnē ir nepieciešams peldošs bloks (vai kā to sauc arī kustīgs, fiksēts, lipīgs), lai lietotājs, ritinot lapu, redzētu vienu stacionāru elementu, kurā visbiežāk tiek ievietota reklāma (tīzeri, baneri vai konteksts) .

Diemžēl Adsense noteikumi aizliedz mums to darīt. Tomēr daudzi vietņu īpašnieki ignorē noteikumus, riskējot paši. Varbūt viņi par to pat netiek sodīti, bet es neieteiktu riskēt.

Es ievietoju savus tīzerus/banerus šādos YAN blokos, un dažreiz reklāmas vietā es tos tur izlieku līdzīgas ziņas vai kādu apmeklētājam noderīgu informāciju.

Pastāstīsim, kā savā vietnē varat izveidot peldošu bloku.

Uzdevums: padarīt pēdējo bloku sānu kolonnā (sānjoslā) peldošu. Turklāt, lai tā pielīp tikai tajā brīdī, kad lietotājs to sasniedz ritinot, nevis uzreiz atverot lapu. Turklāt blokam ir “jāpielīp”, sasniedzot kājeni (t.i., tas nepārklājas).

Ir daudz iespēju, kā ieviest lipīgo bloku, taču ne visas no tām darbojas pareizi. Es tev pastāstīšu no Personīgā pieredze: vienā vietnē var darboties tā pati bloka instalēšanas metode, bet citā vietā tiks parādīti amortizatori.

Zemāk ir peldoša bloka piemērs, kas darbojās gandrīz visās vietnēs, kur es to instalēju. Nekādu aplodu nebija. Dzinējs arī nav svarīgs (DLE, WordPress, LiveStreet utt.).

Sānu kolonnas vajadzīgajā vietā ielīmējiet šādu HTML kodu:

$(window).scroll(function() (
var sb_m = 20; /* polsterējums augšā un apakšā */
var mb = 300; / * pagraba augstums ar malu */
var st = $(logs).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) ) ;
}
cits(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

Šajā kodā var iestatīt polsterējumu augšā, apakšā, kā arī savas kājenes augstumu, t.i. augstums, kurā blokam jāapstājas.

Tagad savienosim JS. Lai to izdarītu, sadaļā HEAD ierakstiet:

Arī bezatteices metode, bet instalējot spraudni. Tas darbojas bez aplokiem.

Priekšrocības:

• nav nepieciešams saprast/saprast HTML;
• uzstādīšanas vienkāršība un ātrums.

Trūkumi:

Kā izmantot:

Tās man šķita mazāk ērtas un ne tik skaidras kā divas iepriekš minētās metodes. Bet es jums par viņiem tik un tā pastāstīšu.

Ievietojiet sānjoslā:

Mēs rakstām stilus HTML valodā (labāk tos pievienot tieši CSS):

.sticky(
pozīcija: fiksēta;
z-indekss: 101;
}
.stop(
pozīcija: relatīvs;
z-indekss: 101;
}

Tagad mēs pievienojam lapai pašu skriptu (labāk to ievietot atsevišķu failu, tāpat kā sadaļā “Visdarbīgākā metode”):

(funkcija() (
var a = document.querySelector("#malā1" ) , b = null, P = 0 ; // ja nulle tiek aizstāta ar skaitli, bloks tiks saglabāts, pirms pārlūkprogrammas loga augšējā mala sasniegs elementa augšējo malu. Var būt negatīvs skaitlis
window.addEventListener("scroll" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
funkcija Ascroll() (
if (b == null) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
for (var i = 0 ; i< Sa.length; i++) {
if (Sa[ i].indexOf("box-sizing" ) == 0 || Sa[ i].indexOf("pārpilde" ) == 0 || Sa[ i].indexOf("width" ) == 0 || Sa[ i].indexOf("polsterējums" ) == 0 || Sa[ i].indexOf("border" ) == 0 || Sa[ i].indexOf("outline" ) == 0 || Sa[ i].indexOf("box-shadow" ) == 0 || Sa[ i].indexOf("fons" ) == 0 ) (
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.bērni[0];
a.style .height = b.getBoundingClientRect() .height + "px" ;
a.style .padding = "0" ;
a.style .border = "0" ;
}
var Ra = a.getBoundingClientRect() ,
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // bloka atlasītājs, sasniedzot augšējo malu, ir jāatsprauž lipīgais elements; Math.round() ir paredzēts tikai IE; ja nulle tiek aizstāta ar skaitli, tad bloks pielīp, pirms elementa apakšējā mala sasniegs kājeni
if ((Ra.top - P) Kā izveidot bloku (div, aside utt.), galvene, reklāma, izvēlne ir labota. Tikai CSS # aside1 ( /* bloks, kas paliks vietā */ pozīcija: fiksēta; z-indekss: 101; )

Faktiski vairumā gadījumu: peldošas pogas sociālie tīkli, skaitītāji, nav nepieciešams skripts.

Tas ir, elements ar saitēm (vai kāds cits) atrodas tālu no lapas sākuma. Pieņemsim, ka liela galvene vai sānu kolonna satur daudzas noderīgas lietas, piemēram, meklēšanu, kategorijas utt. Kad ritināšanas laikā pārlūkprogrammas loga augšdaļa pieskaras elementa augšējai malai, tas pielīp un “ceļo” līdz lapas beigām.