Фиксированный блок в сайдбаре. Фиксированное верхнее меню и плавающий сайдбар в WordPress

Двухколоночный макет наиболее популярен в веб-дизайне за счёт своей универсальности и простоты. В широкой колонке располагается контент, а в узкой, называемой ещё на жаргоне веб-разработчиков сайдбар (от англ. sidebar, боковая панель) навигация. Впрочем, ничего не мешает сделать колонки одинаковой ширины, если это продиктовано дизайном. На рис. 5.11 представлен макет, состоящий из двух колонок, в правой колонке расположена навигация, а в левой контент.

Рис. 5.11. Двухколоночный макет

Из-за того, что ширина всех колонок известна заранее, в силу того, что мы имеем дело с фиксированным макетом, существует несколько способов формирования колонок. Общий принцип у них такой. Слои с колонками располагаются в контейнере, назовём его layout , для которого устанавливается ширина макета и выравнивание по центру.

Колонка 1 Колонка 2

Будем придерживаться соглашения, что слой sidebar формирует боковую панель с навигацией, а content основное содержание страницы (контент).

Первый способ формирования колонок основан на позиционировании. Для слоя layout задаём относительное позиционирование, а для внутренних слоёв абсолютное. При таком сочетании значений можно устанавливать положение элементов относительно родителя с помощью свойств left и top (пример 5.3).

Пример 5.3. Использование позиционирования

Layout { width: 980px; margin: auto; position: relative; /* Относительное позиционирование */ } .sidebar, .content { position: absolute; } .sidebar { background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ } .content { background: #F4ECCE; /* Цвет фона */ left: 180px; /* Сдвиг вправо */ width: 800px; /* Ширина колонки */ }

По умолчанию у свойства left значение 0, так что для sidebar это свойство не установлено. У абсолютно позиционированных элементов ширина равна ширине контента, так что значение width требуется указывать для каждого слоя.

Приведённый способ имеет то преимущество, что для него не играет большой роли порядок слоёв в коде. Можно с лёгкостью поменять их местами, на отображении колонок это не скажется.

Колонка 2 Колонка 1

Более простой стиль получается при использовании свойства float со значением left , которое задано для слоя sidebar . Но чтобы получилась не обтекаемая врезка, а подобие колонки, для слоя content также требуется установить свойство margin-left со значением равным ширине левой колонки или превышающим её (пример 5.4).

Пример 5.4. Использование float

Layout { width: 980px; margin: auto; } .sidebar { background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ float: left; /* Обтекание справа */ } .content { background: #F4ECCE; /* Цвет фона */ margin-left: 180px; /* Отступ слева */ }

Как вариант, можно убрать свойство margin-left , а для формирования колонок добавить к layout свойство overflow с значением auto или hidden .

Приведённые выше стили для создания навигации слева могут быть легко изменены и под навигацию справа. В действительности, разница между колонками только в их ширине и цвете фона. Изменив размеры, связанные с шириной и поменяв местами фон, получим результат, когда навигация уже расположена справа. В примере 5.5 показана модификация кода из примера 5.3.

Пример 5.5. Использование позиционирования

Layout { width: 980px; margin: auto; position: relative; } .sidebar, .content { position: absolute; } .content { background: #F4ECCE; /* Цвет фона */ width: 800px; /* Ширина колонки */ } .sidebar { background: #C6DD7D; /* Цвет фона */ left: 800px; /* Сдвиг вправо */ width: 180px; /* Ширина колонки */ }

При позиционировании возможны проблемы с наложением подвала (при его наличии) на другие элементы. Этот вопрос рассмотрен в разделе, посвященном резиновым трёхколоночным макетам.

Аналогичное действие можно провести и с примером, в котором фигурирует свойство margin-left . Но в данном случае удобнее использовать свойство float со значением right . Также margin-left поменяется на margin-right (пример 5.6).

Пример 5.6. Использование float

Layout { width: 980px; margin: auto; } .sidebar { background: #C6DD7D; /* Цвет фона */ width: 180px; /* Ширина колонки */ float: right; /* Обтекание слева */ } .content { background: #F4ECCE; /* Цвет фона */ margin-right: 180px; /* Отступ справа */ }

Стили для колонок не учитывают некоторых вещей, которые часто присутствуют на реальных сайтах. В частности, не указаны поля, поэтому текст вплотную прилегает к краю колонок. Добавление свойства padding при заданном width расширяет ширину элемента, поэтому необходимо уменьшить значение width на величину полей или добавить вложенный элемент с полями или отступами.

В примере 5.7 рассмотрен код, в котором навигация расположена в правой колонке, также присутствует подвал, и учитываются поля.

Пример 5.7. Двухколоночный макет

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Двухколоночный макет BODY { background: #fff1e4; margin: 0; } .layout { width: 970px; margin: 0 auto 10px; background: #fff; } .content { margin-right: 350px; padding: 10px; } .sidebar { width: 320px; float: right; background: #e0ecb8; } .footer { clear: both; /* Отмена обтекания */ border-top: 1px solid #ccc; padding: 10px; }

• Главная
• Все коктейли
• Коллекции
• Бокалы
• Компоненты
• Фичи

Молоко - 40 мл, сок яблочный - 100 мл, сироп сахарный - 30 мм, один яичный желток.

Приготовить напиток в миксере, подать в бокале хайбол со льдом и соломинкой.

Результат данного примера показан на рис. 5.12.

Рис. 5.12. Двухколоночный макет

Для слоя content поля включаются через свойство padding , но поскольку ширина слоя не указана, то поля никак на неё не повлияют. В слое sidebar вставлен список, у которого отступы установлены по умолчанию, поэтому никакого «налипания» текста на край фона нет. К подвалу (слой footer ) добавляется свойство clear , которое отменяет действие float . Оно требуется на тот случай, когда высота навигации превышает высоту контента, чтобы текст не накладывался на подвал.

Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS.

В чем его особенность – при прокрутке сайдбар прилипает к верхней части окна, но при этом, когда сайдбар прокручивается до футера, тогда он отлипает от верхней части экрана и прилипает своей нижней частью к футеру, тем самым не перекрывая собой футер (футер должен быть высоким). Если вы понимаете, о чем я.

Пример взят с какого-то сайта и он очень примитивный (и устаревший морально), подходит только для данной верстки. Более универсальный код можно посмотреть в этой статье и уже самостоятельно писать свой код под свой проект.

Не забываем подключить jQuery

$(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(event) { $sidebar.addClass("fixed"); 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); }); });

Плавающий блок (или как его ещё называют двигающийся, фиксированный, прилипший) нужен на сайте для того, чтобы пользователь при прокрутке страницы видел один неподвижный элемент, в который чаще всего помещают рекламу (тизеры , баннеры или контекст ).

Увы, правила адсенса нам это запрещают. Тем не менее, многие владельцы сайтов игнорируют правила на свой страх и риск. Может быть, их за это даже не наказывают, но я бы не советовал рисковать.

Я размещаю в такие блоки РСЯ, свои тизеры/баннеры, а иногда вместо рекламы вывожу там похожие записи или какую-то полезную для посетителя информацию.

Давайте расскажу, какими способами можно сделать плавающий блок на своём сайте.

Задача: сделать последний блок в боковой колонке (сайдбаре) – плавающим. Причём, чтобы он прилипал только в тот момент, когда пользователь доходит до него скроллингом, а не сразу при открытии страницы. Также блок должен «отлипать», доходя до футера (т.е. не перекрывать его).

Существует много вариантов реализации прилипающего блока, но не все они работают корректно. Скажу из личного опыта: один и тот же метод установки блока может сработать на одном сайте, а на другом появятся косяки.

Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (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() .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} ) ;
}
else {
sb.css({ "paddingTop" : 0 } ) ;
}
}
} ) ;

В этом коде можно задать отступы сверху, снизу, а также высоту вашего подвала, т.е. ту высоту, на которой блоку нужно остановиться.

Теперь подкключаем JS. Для этого прописываем в секции HEAD:

Также безотказный метод, но при помощи установки плагина . Работает без косяков.

Достоинства:

• не нужно разбираться/понимать HTML;
• простота и скорость установки.

Недостатки:

Как пользоваться:

Они мне показались менее удобными и не такими понятными, как два метода выше. Но всё же о них расскажу.

В сайдбар вставляем:

Прописываем стили в HTML (лучше добавить сразу в CSS):

.sticky {
position: fixed;
z-index: 101 ;
}
.stop {
position: relative;
z-index: 101 ;
}

Теперь на страницу добавляем сам скрипт (лучше вынести в отдельный файл, как в «Самом рабочем способе»):

(function() {
var a = document.querySelector("#aside1" ) , b = null, P = 0 ; // если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом
window.addEventListener("scroll" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
function 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("overflow" ) == 0 || Sa[ i] .indexOf("width" ) == 0 || Sa[ i] .indexOf("padding" ) == 0 || Sa[ i] .indexOf("border" ) == 0 || Sa[ i] .indexOf("outline" ) == 0 || Sa[ i] .indexOf("box-shadow" ) == 0 || Sa[ i] .indexOf("background" ) == 0 ) {
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.children[ 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 ) ; // селектор блока, при достижении верхнего края которого нужно открепить прилипающий элемент; Math.round() только для IE; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
if ((Ra.top - P) Как сделать блок (div, aside и т.п), шапку, рекламу, меню фиксированными. Только CSS #aside1 { /* блока, который будет оставаться на месте */ position: fixed; z-index: 101; }

Собственно говоря, для большинства случаев: плавающие кнопки социальных сетей, счётчиков, скрипт не требуется.

То есть элемент со ссылками (или чем там ещё) находится далеко от начала страницы. Скажем, шапка большая или боковая колонка содержит много полезностей, таких как поиск, рубрики и т.п. Когда во время скроллинга верхняя часть окна браузера касается верхнего края элемента, то он приклеивается и "едет" вниз до конца страницы.