Фиксированное верхнее меню и плавающий сайдбар в WordPress. Двухколонная верстка (фиксированный sidebar и резиновый контент) Создание навигационной панели с правой стороны. HTML & CSS

Интересно, что блок, остающийся на одном месте при скроллинге, называют: «перемещающийся» , «плавающий» , «двигающийся» , «подвижный» , «скользящий» . А фактически он «прилипший» , «неподвижный» , «фиксорованный» и располагающийся на определённом участке экрана монитора, вне зависимости от степени прокрутки веб-страницы.

Исходный вариант, когда ничего не плавает

Изначальные данные: блок уже спозиционирован. У меня как-то так с большим футером, у вас — иначе.

Как сделать блок (div, aside и т.п), шапку, рекламу, меню фиксированными. Только CSS #aside1 { /* блока, который будет оставаться на месте */ position: fixed; z-index: 101; }

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

Как сделать, чтобы блок div прилипал во время прокрутки страницы. Уже скрипт

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

.sticky { position: fixed; top: 0 px; /* если ноль заменить на число (и в скрипте тоже), то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом. Применим, например, */ z-index: 101; } (function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными var a = document.querySelector("#aside1 "), b = null; // селектор блока, который нужно закрепить // если function Ascroll() { if (b == null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i < Sa.length; i++) { // if (Sa[i].indexOf("overflow") == 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]) + "; " } } b = document.createElement("div"); // создать потомка b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым var l = a.childNodes.length; for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: , внутри которого по прежнему работают скрипты) b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; // если под скользящим элементом есть другие блоки, можно своё значение a.style.padding = "0"; a.style.border = "0"; // если элементу присвоен или } if (a.getBoundingClientRect().top #aside1 > div:nth-child(3), #aside2 > div:nth-child(2) ")).forEach(function(a) { // селекторы блоков, которые будут фиксироваться. Может быть как один блок, так два и более var 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("overflow") == 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]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } 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("#article ").getBoundingClientRect().bottom + 0 ); if ((Ra.top - P) Array.prototype.slice.call(document.querySelectorAll("#aside1 div.stickyDa ")).forEach(function(a) { var 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("overflow") == 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]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } 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 - a.parentNode.getBoundingClientRect().bottom + parseFloat(getComputedStyle(a.parentNode, "").paddingBottom.slice(0, -2))); if ((Ra.top - P) (function(){ var A0 = document.querySelector("#aside1 "), A1 = A0.querySelectorAll(".stickyDa "); Array.prototype.slice.call(A1).forEach(function(a, index) { var 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("overflow") == 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]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; a.style.padding = "0"; a.style.border = "0"; } var Ra = a.getBoundingClientRect(), R, Rh = Ra.top + b.getBoundingClientRect().height; if (A1 != undefined) { R = Math.round(Rh - A1.getBoundingClientRect().top + 5 ); // расстояние между блоками, чтобы плавающие элементы не прижимались вплотную друг к другу } else { R = Math.round(Rh - A0.getBoundingClientRect().bottom + parseFloat(getComputedStyle(A0, "").paddingBottom.slice(0, -2))); } if ((Ra.top - P) W) { if (Ra.top < K) { // скролл вниз if (R2 + N > R1) { // не дойти до низа if (Rb.bottom - W + N = 0) { // подцепиться b.className = "sticky"; b.style.top = P + "px"; Z = Ra.top - P; } else { b.className = "stop"; b.style.top = - Z + "px"; } } else { b.className = ""; b.style.top = ""; Z = 0; } } K = Ra.top; } else { if ((Ra.top - P)

Обратите внимание, что если в коде, заключенном в echo "" , будут встречаться одиночные кавычки, то их нужно будет экранировать , т.е. поставить перед каждой из них обратный слеш (\") без скобок, естественно.

В общем получилось, как получилось. Как это конкретно прикрутить к вашей теме, вам придется решать самим — когда есть время, то это даже прикольно «поломать голову». Спасибо.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

WebPoint PRO - адаптивная тема для WordPress с широким функционалом и грамотной технической поисковой оптимизацией
Share42 - скрипт для добавления на сайт кнопок социальных сетей и закладок (есть вариант плавающей панели)

Двухколоночный макет наиболее популярен в веб-дизайне за счёт своей универсальности и простоты. В широкой колонке располагается контент, а в узкой, называемой ещё на жаргоне веб-разработчиков сайдбар (от англ. 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 . Оно требуется на тот случай, когда высота навигации превышает высоту контента, чтобы текст не накладывался на подвал.