بلوک ثابت در نوار کناری. منوی بالا و نوار کناری شناور در وردپرس ثابت شد. دو یا چند بلوک یکی پس از دیگری ثابت می شوند

الزامات چیدمان چیست؟

• طرح دو ستون لاستیکی
• نوار کناری با عرض ثابت 300 پیکسل
• محتوا به بقیه عرض کشیده می شود.
• فوتر به پایین فشار داده شده است (در این آموزش من نشان نمی دهم که چگونه این کار انجام می شود).

چه مشکلاتی در Css هنگام چیدمان چنین طرح‌بندی ایجاد می‌شود:

1 راه.

اگر بلوک ها را شناور کنید، شما باید به آنها یک عرض ثابت بدهد(شما نمی توانید 1 نوار کناری را روی 300 پیکسل و محتوا را روی 100٪ تنظیم کنید). خوب، نکته اصلی برای درک این است که این روش برای ما مناسب نیست.

2 راه.

خیلی از حروفچین ها این روش را ارائه می دهند، به چه فکر می کنند؟! ماهیت روش این است که می توانید نوار کناری را با عرض 300 شناور تنظیم کنید و محتوا را شناور نکنید و حاشیه سمت چپ: 300 پیکسل را روی آن قرار دهید. راه خوبو به نظر می رسد همه چیز خیلی خوب پیش می رود. راستش من فکر می کردم این بهترین راه است اما این روش مشکلات خاص خودش را دارد. دلایل کنار گذاشتن این روش این است که اگر به طور ناگهانی در محتوا، به عنوان مثال، یک منو با لی شناور یا هر بلوک شناور دیگری ایجاد کنیم و سپس بخواهیم آنها را با clear:both پاک کنیم، حاشیه پایین این بلوک می لغزد. تا سطح حاشیه پایین نوار کناری (چه چیزی و عجیب نیست از آنجایی که فوت پاک می شود، می توانید از این امر اجتناب کنید اگر یک بلوک شناور را روی یک ارتفاع ثابت تنظیم کنید، اما اصلاً اینطور نیست که یک ارتفاع ثابت تعیین کنید).

3 راه.

قابل استفاده برای موقعیت نوار کناری مطلقاما فقط اگر شما ما مطمئن هستیم که محتوا از نظر ارتفاع بزرگتر از نوار کناری خواهد بوددر غیر این صورت، کل محتویات نوار کناری روی پاورقی قرار می گیرد (در نهایت، موقعیت مطلق از جریان عمومی خارج می شود).

اما در مورد من، این نیز راه خوبی نیست!

4 راه.

"راه عالی، اگر نقصی دارد لطفا نظر دهید. اما من فکر می کنم این بهترین راه است."

• مزایای این روش: اولاً محتوای DOM قبل از نوار کناری می رود که برای موتورهای جستجو خوب است.
• هیچ چیز در پاورقی جا نمی شود
• هر بلوکی را می توان پاک کرد و هیچ چیز به مرز پایین نمی لغزد (بنابراین ما بر مشکلات روش دوم غلبه کردیم).

به طور کلی نحوه کار:به کد نگاه کنید ابتدا محتوا و سپس نوار کناری قرار می گیرد. شناور را روی این دو بلوک قرار می دهیم (البته نوار کناری به پایین می لغزد). پس از آن، ویژگی نوار کناری حاشیه سمت چپ:-100٪ را تنظیم می کنیم. عالی است، به جای خود برگشته است و محتوا را با margin-lerft:300px تورفتگی کنید.

html

css

یک بلوک شناور (یا همانطور که به آن متحرک، ثابت، چسبیده نیز می‌گویند) در سایت مورد نیاز است تا کاربر هنگام پیمایش صفحه یک عنصر ثابت را ببیند که اغلب تبلیغات در آن قرار می‌گیرد (تیزرها، بنرها یا زمینه).

افسوس، قوانین ادسنس ما را منع می کند. با این حال، بسیاری از صاحبان سایت با مسئولیت خود قوانین را نادیده می گیرند. شاید آنها حتی برای این مجازات هم نشوند، اما من توصیه نمی کنم که ریسک کنید.

من تیزرها / بنرهای خود را در چنین بلوک هایی قرار می دهم و گاهی اوقات به جای تبلیغات آنها را در آنجا نمایش می دهم پست های مرتبطیا اطلاعات مفیدی برای بازدید کننده.

بیایید به شما بگوییم که چگونه می توانید یک بلوک شناور در سایت خود ایجاد کنید.

یک وظیفه:آخرین بلوک در نوار کناری (نوار کناری) را شناور کنید. علاوه بر این، به طوری که فقط در لحظه ای که کاربر با اسکرول به آن می رسد، می چسبد و نه بلافاصله هنگام باز شدن صفحه. همچنین، بلوک باید "بچسبد"، به پاورقی برسد (یعنی روی آن همپوشانی نداشته باشد).

کارآمدترین راه

پیاده سازی های زیادی از بلوک چسبنده وجود دارد، اما همه آنها به درستی کار نمی کنند. من می گویم از تجربه شخصی: روش نصب یک بلوک می تواند در یک سایت کار کند، اما در سایت دیگر جم ها ظاهر می شوند.

در زیر نمونه ای از یک بلوک شناور است که تقریباً در هر سایتی که من آن را نصب کرده ام، کار کرده است. هیچ بزی وجود نداشت. موتور نیز مهم نیست (DLE، WordPress، LiveStreet، و غیره).

کد HTML زیر را در محل دلخواه نوار کناری قرار دهید:

$(window).scroll(function() (
var sb_m = 20 ; /* بالشتک بالا و پایین */
var mb = 300 ; /* ارتفاع زیرزمین با حاشیه */
varst = $(window).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) );
}
دیگر(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

در این کد می توانید بالا، پایین و ارتفاع فوتر خود را تنظیم کنید. ارتفاعی که بلوک باید در آن متوقف شود.

اکنون ما JS را اضافه می کنیم. برای این کار در قسمت HEAD بنویسید:

$(function( ( var $window = $(window); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() var $footer = $(".footer")؛ var $footerTop = $footer.position().top؛ $window.scroll(function(رویداد) ($sidebar.addClass("ثابت")؛ var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0، $sidebarTop - $scrollTop)؛ if ($scrollTop + $sidebarHeight > $footerTop) ( var $topPosition = Math.min($topPosition، $footerTop - $scrollTop - $sidebarHeight)؛ ) $sidebar.css("top"، $topPosition)؛ ));

جالب اینجاست که بلوکی که هنگام پیمایش در یک مکان باقی می ماند، نامیده می شود: "در حال حرکت", "شناور", "در حال حرکت", "سیار", "سر خوردن". و در واقع او "گیر", "درست شد", "درست شد"و بدون در نظر گرفتن میزان پیمایش صفحه وب، در ناحیه خاصی از صفحه نمایشگر قرار دارد.

نوع اولیه زمانی که هیچ چیز شناور نیست

داده های اولیه: بلوک از قبل در موقعیت قرار گرفته است. من چیزی شبیه به این را با یک فوتر بزرگ دارم، شما آن را متفاوت دارید.

نحوه ساخت بلوک (div، کنار، و غیره)، هدر، تبلیغ، منو ثابت شده است. فقط CSS

یک بلوک شناور که روی پاورقی یا عناصر دیگر منجمد می شود. جاوا اسکریپت خالص بدون جی کوئری

به طوری که بلوک شناور ناپدید نمی شود، به پاورقی سایت نمی رود، بلکه بالای عنصر مشخص شده متوقف می شود.

عنصر فقط در حین پیمایش در یک عنصر دیگر می‌چسبد

برای اینکه عنصر از قلاب خارج شود و با پایان فیلد مقاله متوقف شود. یعنی حاشیه های پایین مقاله و کنار باید در یک خط باشند.

نحوه چسباندن دو بلوک (اختیاری) در هر دو ستون کناری

دو یا چند بلوک یکی پس از دیگری ثابت می شوند

هنگام اسکرول کردن به پایین، اولین بلوک می‌چسبد، وقتی والد به پایان می‌رسد، می‌چسبد. دومی می چسبد، وقتی پدر و مادر تمام می شود، جدا می شود. چوب سوم، و غیره.

همین اتفاق، فقط با پدر و مادر مشترک.

نوار کناری بلند شناور بدون فضای سفید

هنگام اسکرول کردن به پایین، وقتی لبه پایینی آن با لبه پایین پنجره مرورگر تماس می‌گیرد، نوار کناری می‌چسبد. هنگام پیمایش به بالا، وقتی لبه بالایی آن لبه بالایی پنجره مرورگر را لمس کند، نوار کناری می‌چسبد. یک حد پایین تر وجود دارد که ستون به آن می رسد.

طرح دو ستونی به دلیل تطبیق پذیری و سادگی، بیشترین محبوبیت را در طراحی وب دارد. محتوا در یک ستون گسترده قرار دارد و ناوبری در یک ستون باریک است که در اصطلاح توسعه دهندگان وب، نوار کناری نیز نامیده می شود. با این حال، اگر طراحی دیکته شده باشد، هیچ چیز مانع از ایجاد ستون هایی با همان عرض نمی شود. روی انجیر شکل 5.11 یک طرح دو ستونی را نشان می دهد که پیمایش در سمت راست و محتوا در سمت چپ وجود دارد.

برنج. 5.11. طرح بندی دو ستونی

با توجه به اینکه عرض همه ستون ها از قبل مشخص است، با توجه به اینکه با یک چیدمان ثابت روبرو هستیم، روش های مختلفی برای تشکیل ستون وجود دارد. اصل کلی آنها این است. لایه‌های دارای ستون در یک ظرف قرار می‌گیرند، بگذارید آن را layout بنامیم، که عرض طرح و تراز مرکزی برای آن تنظیم شده است.

ما به این قرارداد پایبند هستیم که لایه کناری نوار کناری با پیمایش را تشکیل می دهد و محتوا محتوای اصلی صفحه (محتوا) است.

ناوبری در سمت چپ

اولین راه برای تشکیل ستون ها بر اساس موقعیت یابی است. برای لایه چیدمان، موقعیت نسبی و برای لایه های داخلی، موقعیت مطلق قرار می دهیم. با این ترکیب مقادیر، می توانید موقعیت عناصر را نسبت به والد با استفاده از ویژگی های چپ و بالا تنظیم کنید (مثال 5.3).

مثال 5.3. با استفاده از موقعیت یابی

طرح بندی (عرض: 980 پیکسل؛ حاشیه: خودکار؛ موقعیت: نسبی؛ /* موقعیت نسبی */ ) نوار کناری، محتوا (موقعیت: مطلق؛) نوار کناری (پس‌زمینه: #C6DD7D؛ /* رنگ پس‌زمینه */ عرض: 180 پیکسل. /* عرض ستون */ ) .content ( پس زمینه: #F4ECCE؛ /* رنگ پس زمینه */ چپ: 180 پیکسل؛ /* تغییر به راست */ عرض: 800 پیکسل؛ /* عرض ستون */ )

به طور پیش فرض، ویژگی چپ دارای مقدار 0 است، بنابراین این ویژگی برای نوار کناری تنظیم نشده است. المان‌های کاملاً قرار داده شده دارای عرضی برابر با عرض محتوا هستند، بنابراین برای هر لایه باید مقدار عرض مشخص شود.

روش فوق این مزیت را دارد که ترتیب لایه ها در کد نقش زیادی برای آن ندارد. شما به راحتی می توانید مکان آنها را تغییر دهید، این تاثیری در نمایش ستون ها نخواهد داشت.

با استفاده از ویژگی float با مقدار left که برای لایه سایدبار تنظیم شده است، سبک ساده تری به دست می آید. اما برای به دست آوردن یک نوار کناری ساده، بلکه نوعی ستون، لایه محتوا نیز باید ویژگی margin-left را با مقداری برابر یا بیشتر از عرض ستون سمت چپ تنظیم کند (مثال 5.4).

مثال 5.4. با استفاده از شناور

طرح‌بندی (عرض: 980 پیکسل؛ حاشیه: خودکار؛ ) نوار کناری ( پس‌زمینه: #C6DD7D؛ /* رنگ پس‌زمینه */ عرض: 180 پیکسل؛ /* عرض ستون */ شناور: چپ؛ /* پیچیدن سمت راست */ ) . محتوا ( پس‌زمینه : #F4ECCE؛ /* رنگ پس زمینه */ حاشیه چپ: 180 پیکسل؛ /* حاشیه چپ */ )

همچنین، می‌توانید ویژگی margin-left را حذف کنید و یک ویژگی سرریز را با مقدار auto یا مخفی برای تشکیل ستون‌ها به طرح اضافه کنید.

ناوبری سمت راست

سبک های بالا برای ایجاد یک ناوبری سمت چپ را می توان به راحتی برای ناوبری سمت راست تغییر داد. در واقعیت، تنها تفاوت بین ستون ها، عرض و رنگ پس زمینه آنها است. با تغییر ابعاد مربوط به عرض و تعویض پس‌زمینه، زمانی به نتیجه می‌رسیم که ناوبری قبلاً در سمت راست قرار گرفته باشد. مثال 5.5 تغییر کد را از مثال 5.3 نشان می دهد.

مثال 5.5. با استفاده از موقعیت یابی

طرح‌بندی (عرض: 980 پیکسل؛ حاشیه: خودکار؛ موقعیت: نسبی؛ ) نوار کناری، محتوا (موقعیت: مطلق؛) .محتوا (پس‌زمینه: #F4ECCE؛ /* رنگ پس‌زمینه */ عرض: 800 پیکسل؛ /* عرض ستون */ ) نوار کناری ( پس‌زمینه: #C6DD7D؛ /* رنگ پس‌زمینه */ چپ: 800 پیکسل؛ /* تغییر به راست */ عرض: 180 پیکسل؛ /* عرض ستون */ )

هنگام تعیین موقعیت، ممکن است مشکلاتی در مورد تحمیل پاورقی (در صورت وجود) روی عناصر دیگر وجود داشته باشد. این موضوع در بخش چیدمان های لاستیکی سه ستونی مورد بحث قرار گرفته است.

عمل مشابهی را می توان با مثالی انجام داد که در آن ویژگی margin-left ظاهر می شود. اما در این حالت استفاده از ویژگی float با مقدار حق راحت تر است. همچنین حاشیه-چپ به حاشیه-راست تغییر خواهد کرد (مثال 5.6).

مثال 5.6. با استفاده از شناور

طرح‌بندی (عرض: 980 پیکسل؛ حاشیه: خودکار؛ ) نوار کناری ( پس‌زمینه: #C6DD7D؛ /* رنگ پس‌زمینه */ عرض: 180 پیکسل؛ /* عرض ستون */ شناور: راست؛ /* پیچیدن به سمت چپ */ ) . محتوا ( پس‌زمینه : #F4ECCE؛ /* رنگ پس زمینه */ حاشیه سمت راست: 180 پیکسل؛ /* حاشیه سمت راست */ )

سبک های ستون برخی از چیزهایی را که اغلب در سایت های واقعی وجود دارد در نظر نمی گیرند. به طور خاص، حاشیه ها مشخص نشده اند، بنابراین متن با لبه ستون ها همسطح است. افزودن یک ویژگی padding با عرض معین، عرض عنصر را گسترش می‌دهد، بنابراین باید مقدار عرض را با مقدار حاشیه کاهش دهید یا یک عنصر تودرتو با حاشیه یا padding اضافه کنید.

مثال 5-7 به کدی که پیمایش در ستون سمت راست است نگاه می کند، همچنین یک پاورقی وجود دارد و حاشیه ها در نظر گرفته شده است.

مثال 5.7. طرح بندی دو ستونی

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

• خانه
• همه کوکتل ها
• مجموعه ها
• عینک
• اجزاء
• امکانات

تخم مرغ سیب

شیر - 40 میلی لیتر، آب سیب - 100 میلی لیتر، شربت شکر - 30 میلی متر، یک زرده تخم مرغ.

نوشیدنی را در میکسر آماده کنید، در لیوان هایبال با یخ و نی سرو کنید.

تهیه کوکتل

نتیجه این مثال در شکل نشان داده شده است. 5.12.

برنج. 5.12. طرح بندی دو ستونی

برای لایه محتوا، padding از طریق ویژگی padding فعال می شود، اما از آنجایی که عرض لایه مشخص نشده است، padding به هیچ وجه بر آن تأثیر نمی گذارد. یک لیست در لایه نوار کناری درج شده است که به طور پیش فرض دارای تورفتگی است، بنابراین هیچ "چسبیدن" متن به لبه پس زمینه وجود ندارد. خاصیت clear به پاورقی (لایه فوتر) اضافه می شود که اثر شناور را لغو می کند. زمانی که ارتفاع پیمایش بالاتر از ارتفاع محتوا باشد، لازم است تا متن با فوتر همپوشانی نداشته باشد.