Битрикс зафиксировать баннер сайдбар изменить php. Фиксированный двухколоночный макет

Самый простой пример фиксированного плавающего сайдбара на 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 ;
}

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

(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)

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

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

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

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

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

Какие требования к макету:

• Резиновый двухколонный макет
• sidebar фиксированной ширины 300px
• content растягивается на всю остальную ширину.
• footer прижатый к низу(в этом уроке не буду показывать как это делается).

Какие возникают Css проблемы при верстке такого макета:1 способ.

Если вы делаете блоки флотнутыми (float), вы обязаны задать им фиксированную ширину (нельзя задать 1 sidebarу 300px и контенту 100%).В этом случае либо контент слезит вниз, либо появится горизонтальная прокрутка в 300px влево. Ну главное понять что этот способ нам не подходит.

2 способ.

Многие верстальщики предлагают этот способ, о чем они думают вообще?! Суть метода в том, что можно sidebar задать float шириной 300, а конент не флотать и задать ему margin-left:300px. Хороший способ и вроде бы все так хорошо получается. чесно говоря я думал что это самый отличный способ, но в этом методе есть свои подводные камни. Причины отказа от этого метода те что если вдруг мы в контенте верстаем к примеру меню с флотнутыми li либо любые другие блоки float и потом мы хотим их очистить с помощью clear:both, то нижняя граница этого блока сползает вниз на уровень нижней границы sidebar (Что и не странно так как очищается foat, можно этого избежать если флотнутому блоку задать фиксированную высоту , но это совсем не дело задавать фиксированную высоту).

3 способ.

Можно использовать для sidebar position absolute , но только в том случае если вы точно уверены что content по высоте будет больше sidebar иначе все содержимое sidebar залезит на footer(ведь аблосютное позиционирование вырывает с общего потока).

но как для меня это тоже не очень хороший способ!

4 способ.

"Отличный способ, если в нем есть какие-то недостатки прокомментируйте.Но я думаю это лучший способ."

• Плюсы этого метода: во первых в DOMe content будет идти раньше sidebara что хорошо для поисковиков.
• ничего не налазит на футер
• любые блоки можно очищать и ничего не будет слазить к нижней границе (Так мы побороли проблемы второго способа).

Вообщем как он работает: смотрим в код первым идет content за ним 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;
}

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

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

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

Как сделать блок (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)