Yan paneldə sabit blok. WordPress-də sabit üst menyu və üzən yan panel. İki və ya daha çox blok bir-birinin ardınca sabitlənir

Layout tələbləri hansılardır?

• Rezin iki sütunlu düzülmə
• yan panel sabit eni 300px
• məzmun eninin qalan hissəsinə qədər uzanır.
• altbilgi aşağıya sıxıldı (bu təlimatda bunun necə edildiyini göstərməyəcəyəm).

Blokları süzürsünüzsə, onlara sabit genişlik verməlisiniz (300px və 100px məzmun üçün 1 yan panel təyin edə bilməzsiniz). Bu halda ya məzmun aşağı sürüşür, ya da sola 300px üfüqi sürüşdürmə görünür. Yaxşı, başa düşmək üçün əsas odur ki, bu üsul bizə uyğun deyil.

Bir çox yazıçı bu üsulu təklif edir, onlar nə haqda düşünürlər?! Metodun mahiyyəti ondan ibarətdir ki, siz kənar çubuğunu 300 eni ilə üzmək üçün təyin edə bilərsiniz, məzmunu üzməsin və ona margin-left: 300px təyin edə bilərsiniz. Yaxşı yol və hər şey çox yaxşı işləyir. Düzünü desəm, bunun ən yaxşı yol olduğunu düşünürdüm, lakin bu metodun öz tələləri var. Bu metoddan imtina etməyin səbəbləri ondan ibarətdir ki, əgər biz qəflətən məzmunda, məsələn, üzən li və ya hər hansı digər float blokları olan bir menyu yaratsaq və sonra onları aydın: hər ikisi ilə təmizləmək istəsək, bu blokun alt sərhədi sürüşür. yan panelin alt haşiyəsinin səviyyəsinə qədər (Nə və bu qəribə deyil, çünki köpük təmizlənir, üzən bloku sabit bir hündürlüyə təyin etsəniz, bunun qarşısını ala bilərsiniz, lakin bu, sabit bir hündürlüyü təyin etmək üçün heç də belə deyil. ).

Yan panelin mütləq mövqeyi üçün istifadə edilə bilər, ancaq məzmunun hündürlüyünə görə yan paneldən daha böyük olacağına əminsinizsə, əks halda yan panelin bütün məzmunu altbilgiyə uyğunlaşacaq (hər şeydən sonra mütləq yerləşdirmə ümumi axından kənara çıxır) ).

Ancaq mənə gəldikdə, bu da çox yaxşı bir yol deyil!

"Əla yoldur, əgər onun qüsurları varsa, şərh yazın. Amma məncə, bu, ən yaxşı yoldur."

• Bu metodun üstünlükləri: birincisi, DOM məzmunu axtarış motorları üçün yaxşı olan yan paneldən əvvəl gedəcək.
• altbilgiyə heç nə uyğun gəlməyəcək
• hər hansı bloklar təmizlənə bilər və heç bir şey aşağı sərhədə sürüşməyəcək (Beləliklə, ikinci metodun problemlərini aradan qaldırdıq).

Ümumiyyətlə, necə işləyir: koda baxın, əvvəlcə məzmun, sonra yan panel gəlir. biz bu iki bloka float təyin etdik (əlbəttə ki, yan panel aşağı sürüşür). bundan sonra biz yan panel xüsusiyyətini margin-left:-100% təyin etdik. əladır, o, yerinə qayıdır və məzmunu margin-lerft:300px ilə abzaslayın.

Saytda üzən blok (və ya hərəkət edən, sabit, ilişib qalmış adlanır) lazımdır ki, istifadəçi reklamın ən çox yerləşdiyi səhifəni sürüşdürərkən bir sabit elementi görsün (tezerlər, bannerlər və ya kontekst).

Təəssüf ki, adsense qaydaları bizə bunu qadağan edir. Bununla belə, bir çox sayt sahibləri qaydaları öz riski ilə nəzərə almırlar. Bəlkə də buna görə cəzalandırılmırlar, amma risk etməyi məsləhət görməzdim.

Mən tizerlərimi/bannerlərimi belə bloklara yerləşdirirəm və bəzən reklam əvəzinə onları orada nümayiş etdirirəm. əlaqəli yazılar və ya ziyarətçi üçün bəzi faydalı məlumatlar.

Saytınızda üzən bloku necə edə biləcəyinizi sizə xəbər verək.

Tapşırıq: kənar paneldə (kenar çubuğunda) sonuncu bloku üzən hala gətirin. Üstəlik, o, yalnız istifadəçinin səhifəni açdığı anda deyil, sürüşərək ona çatdığı anda yapışdırılır. Həmçinin, blok altbilgiyə çataraq (yəni üst-üstə düşmədən) "yapışmalıdır".

Yapışqan blokun bir çox tətbiqi var, lakin hamısı düzgün işləmir. dan deyim Şəxsi təcrübə: Blok quraşdırmanın eyni üsulu bir saytda işləyə bilər, lakin digərində tıxaclar görünür.

Aşağıda onu quraşdırdığım demək olar ki, hər bir saytda işləmiş üzən blokun bir nümunəsidir. Keçi yox idi. Mühərrik də vacib deyil (DLE, WordPress, LiveStreet və s.).

Aşağıdakı HTML kodunu yan panelin istədiyiniz yerinə yapışdırın:

$(pəncərə).scroll(funksiya() ()
var sb_m = 20 ; /* üst və alt örtük */
var mb = 300 ; /* zirzəmi hündürlüyü kənar ilə */
varst = $(pəncərə).scrollTop() ;
var sb = $(".yapışqan blok" );
var sbi = $(".yapışqan blok .daxili" );
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height () ;

Əgər(sb_h + $(sənəd).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop" : h) );
}
başqa(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

Bu kodda siz altbilginizin yuxarı, aşağı və hündürlüyünü təyin edə bilərsiniz, yəni. blokun dayanmalı olduğu hündürlük.

İndi biz JS-i daxil edirik. Bunu etmək üçün HEAD bölməsinə yazın:

Həm də uğursuz üsuldur, lakin . Tıxacsız işləyir.

Üstünlüklər:

• HTML-i başa düşməyə/anlamağa ehtiyac yoxdur;
• quraşdırma asanlığı və sürəti.

Qüsurlar:

Necə istifadə etməli:

Mənə yuxarıdakı iki üsul kimi daha az rahat və aydın görünmürdülər. Amma hər halda onlar haqqında sizə məlumat verəcəyəm.

Yan panelə yapışdırın:

HTML-də üslubları təyin edirik (dərhal CSS-ə əlavə etmək daha yaxşıdır):

.yapışqan(
mövqe: sabit;
z indeksi: 101
}
.dayan (
mövqe: nisbi;
z indeksi: 101
}

İndi skriptin özünü səhifəyə əlavə edirik (daxil etmək daha yaxşıdır ayrı fayl, "Ən işlək üsul"dakı kimi):

(funksiya () (
var a = document.querySelector("#side1" ) , b = null, P = 0 ; // əgər sıfır rəqəmlə əvəz edilərsə, o zaman blok brauzer pəncərəsinin yuxarı kənarı elementin yuxarı kənarına çatmazdan əvvəl yapışacaq. Mənfi rəqəm ola bilər
window.addEventListener("scroll" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
funksiyası Ascroll() (
əgər (b == null) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
üçün (var i = 0; i< Sa.length; i++) {
if (Sa[ i] .indexOf("qutu ölçüsü" ) == 0 || Sa[ i] .indexOf("daşma" ) == 0 || Sa[ i] .indexOf("en" ) == 0 || Sa[ i] .indexOf("padding" ) == 0 || Sa[ i] .indexOf("border" ) == 0 || Sa[ i] .indexOf("kontur" ) == 0 || Sa[ i] .indexOf("qutu-kölgə" ) == 0 || Sa[ i] .indexOf("fon" ) == 0 ) (
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.uşaqlar[ 0 ] ;
a.style .height = b.getBoundingClientRect() .height + "px" ;
a.style .padding = "0" ;
a.style .border = "0" ;
}
varRa = a.getBoundingClientRect(),
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ); // blok selektoru, yuxarı kənarına çatdıqda yapışqan elementi çıxarmaq lazımdır; Math.round() yalnız IE üçündür; sıfır rəqəmlə əvəz edilərsə, blok elementin alt kənarı altbilgiyə çatmazdan əvvəl yapışacaq
əgər ((Ra.top - P) Blok necə hazırlanır (div, kənara və s.), başlıq, reklam, menyu düzəldilir. Yalnız CSS #side1 ( /* yerində qalmaq üçün blok */ mövqe: sabit; z indeksi: 101; )

Düzünü desək, əksər hallarda: üzən düymələr sosial şəbəkələr, sayğaclar, skript tələb olunmur.

Yəni, keçidləri olan element (və ya hər hansı) səhifənin əvvəlindən uzaqdır. Tutaq ki, başlıq böyükdür və ya yan paneldə axtarış, başlıqlar və s. kimi bir çox faydalılıq var. Brauzer pəncərəsinin yuxarı hissəsi sürüşmə zamanı elementin yuxarı kənarına toxunduqda, o, yapışır və səhifənin sonuna qədər "sürüşür".