Фиксированное верхнее меню и плавающий сайдбар в WordPress. Фиксированный двухколоночный макет Плавающий блок, замирающий над футером или другим элементом

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

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

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

HTML-разметка простой страницы HEADER CONTENT FIXED SIDEBAR FOOTER CSS-стили для блоков контента .header { width: 100%; background: purple; height: 80px; } .content { width: 80%; background: blue; height: 800px; float: left; } .sidebar { width: 20%; background: green; height: 100px; float: right; } .sidebar.fixed { position: fixed; right: 50%; margin-right: -50%; } .footer { width: 100%; background: gray; height: 500px; clear: both; } 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:

Самый простой способ (для WordPress)

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

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

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

Недостатки:

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

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

Скачиваем плагин.

Устанавливаем.

Активируем.

Заходим в админке во вкладку: Дизайн -> Виджеты. Открываем тот виджет, который хотим сделать фиксированным.

Ставим галочку возле «Зафиксировать виджет» и нажимаем кнопку «Сохранить».

Другие способы реализации скользящих блоков

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

Вариант #1 (без jQuery)

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

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

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

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