Фіксований двоколоночний макет. Фіксоване верхнє меню та плаваючий сайдбар у WordPress
Які вимоги до макету:
- Гумовий двоколонний макет
- sidebar фіксованої ширини 300px
- content розтягується на всю решту ширини.
- footer притиснутий до низу(у цьому уроці не показуватиму як це робиться).
Які виникають проблеми Css при верстці такого макету:
1 спосіб.
Якщо ви робите блоки флотнутими (float), ви повинні задати їм фіксовану ширину(Не можна задати 1 sidebarу 300px і контенту 100%).В цьому випадку або контент злізить вниз, або з'явиться горизонтальне прокручування в 300px вліво. Ну головне зрозуміти, що цей спосіб нам не підходить.
2 спосіб.
Багато верстальників пропонують цей спосіб, про що вони думають взагалі? Суть методу в тому, що можна боротьбу задати float шириною 300, а конент не флотати і задати йому margin-left:300px. Хороший спосіб і начебто все так добре виходить. чесно кажучи я думав що це найвідмінніший спосіб, але в цьому методі є свої підводні камені. Причини відмови від цього способу ті що якщо раптом ми в контенті верстаємо наприклад меню з флотнутими li або будь-які інші блоки float і потім ми хочемо їх очистити за допомогою clear:both, то нижня межа цього блоку сповзає вниз на рівень нижньої межі sidebar. і не дивно оскільки очищається foat, можна цього уникнути якщо флотнутому блоку задати фіксовану висоту, але це не справа ставити фіксовану висоту).
3 спосіб.
Можна використовувати для sidebar position absolute, але тільки якщо ви точно впевнені що content по висоті буде більше sidebarінакше весь вміст sidebar залізе на footer (адже аблосютне позиціонування вириває із загального потоку).
але як мені це теж не дуже хороший спосіб!
4 спосіб.
"Чудовий спосіб, якщо в ньому є якісь недоліки прокоментуйте. Але я думаю це найкращий спосіб."
- Плюси цього методу: по-перше в DOMe content буде йти раніше sidebara що добре для пошукових систем.
- нічого не налазить на футер
- будь-які блоки можна очищати і нічого не буде злазити до нижньої межі (Так ми подолали проблеми другого способу).
Взагалі як він працює:дивимося в код першим, що йде вміст за ним на sidebar. задаємо float цим двом блокам(природно sidebar сповзає вниз). після цього задаємо sidebar властивість margin-left:-100%. добре він повернувся на місце, і робимо відступ у контенту margin-lerft: 300px.
html
css
.sidebar(width:300px;
display: block;
float: left;
margin: 0 0 0 -100%;
}
.content(
min-width:723px;
display: block;
float: left;
margin: 0 0 0 220px;
}
Плаваючий блок (або як його ще називають рухається, фіксований, прилиплий) потрібен на сайті для того, щоб користувач при прокручуванні сторінки бачив один нерухомий елемент, в який найчастіше поміщають рекламу (тизери, банери або контекст).
На жаль, правила адсенсу нам це забороняють. Тим не менш, багато власників сайтів ігнорують правила на свій страх та ризик. Можливо, їх за це навіть не карають, але я не радив би ризикувати.
Я розміщую в таких блоках РМЯ, свої тизери/банери, а іноді замість реклами виводжу там схожі записи або якусь корисну для відвідувача інформацію.
Давайте розповім, як можна зробити плаваючий блок на своєму сайті.
Завдання:зробити останній блок у бічній колонці (сайдбарі) - плаваючим. Причому, щоб він прилипав тільки в той момент, коли користувач доходить до нього скролінг, а не відразу при відкритті сторінки. Також блок має «відлипати», доходячи до футера (тобто не перекривати його).
Самий робочий спосіб
Існує багато варіантів реалізації блоку, що прилипає, але не всі вони працюють коректно. Скажу з особистого досвіду: один і той самий метод установки блоку може спрацювати на одному сайті, а на іншому з'являться косяки.
Нижче є приклад плаваючого блоку, який спрацював практично на всіх сайтах, де я його встановлював. Косяков не було. Двигун теж не важливий (DLE, WordPress, LiveStreet та ін.).
У бажаному місці бічної колонки вставляємо такий HTML-код:
$(window) .scroll(function() (
var sb_m = 20; / * відступ зверху та знизу */
var mb = 300; / * висота підвалу із запасом */
var st = $(window) .scrollTop();
var sb = $(".sticky-block");
var sbi = $(".sticky-block .inner");
var sb_ot = sb.offset().
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));
}
else (
sb.css(("paddingTop": 0));
}
}
}
)
;
У цьому вся коді можна задати відступи зверху, знизу, і навіть висоту вашого підвалу, тобто. ту висоту, де блоку потрібно зупинитися.
Тепер підключаємо JS. Для цього прописуємо у секції HEAD: