Содержание показать

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

Такая «плавающая» реклама заметно повышает число показов и переходов по ней, а соответственно и доход.

Рекламу Adsense помещать в фиксированный блок нельзя.

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

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

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

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

Самый рабочий способ

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

Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (DLE, WordPress, LiveStreet и др.).

В желаемом месте боковой колонки вставляем такой HTML-код:

<div class="sticky-block">
    <div class="inner">
        Здесь вставляем тот код, который должен двигаться.
    </div>
</div>

Далее создаем файл fixads.js и прописываем в него:

$(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:

<script src="ПУТЬ_К_ФАЙЛУ/fixads.js" type="text/javascript"></script>

Готово!

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

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

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

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

Недостатки:

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

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

  1. Скачиваем плагин.
  2. Устанавливаем.
  3. Активируем.
  4. Заходим в админке во вкладку: Дизайн -> Виджеты. Открываем тот виджет, который хотим сделать фиксированным.
  5. Ставим галочку возле «Зафиксировать виджет» и нажимаем кнопку «Сохранить».

Пример:

Q2W3 Fixed Widget (Sticky Widget)

Готово!

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

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

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

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

<aside id="aside1">
    Здесь вставляем тот код, который должен двигаться.
</aside>

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

<style>
.sticky {
  position: fixed;
  z-index: 101;
}
.stop {
  position: relative;
  z-index: 101;
}
</style>

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

<script>
(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 = '<div style="'+s+'">'+a.innerHTML+'</div>';
    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) <= 0) {
    if ((Ra.top - P) <= R) {
      b.className = 'stop';
      b.style.top = - R +'px';
    } else {
      b.className = 'sticky';
      b.style.top = P + 'px';
    }
  } else {
    b.className = '';
    b.style.top = '';
  }
}
})()
</script>

Готово!

Вариант #2 (с jQuery)

Прописываем HTML-код в боковой колонке:

<div id="sidebar">
    Здесь вставляем тот код, который должен двигаться.
</div>

Подключаем скрипт. Перед </body> вставляем:

<script type="text/javascript">
(function($) {
    $.lockfixed("#sidebar",{offset: {top: 10, bottom: 10}});
})(jQuery);
</script>

Создаём файл jquery.lockfixed.js и в него прописываем:

(function(e,p){e.extend({lockfixed:function(a,b){b&&b.offset?(b.offset.bottom=parseInt(b.offset.bottom,10),b.offset.top=parseInt(b.offset.top,10)):b.offset={bottom:100,top:0};if((a=e(a))&&a.offset()){var n=a.css("position"),c=parseInt(a.css("marginTop"),10),l=a.css("top"),g=a.offset().top,h=!1;if(!0===b.forcemargin||navigator.userAgent.match(/\bMSIE (4|5|6)\./)||navigator.userAgent.match(/\bOS ([0-9])_/)||navigator.userAgent.match(/\bAndroid ([0-9])\./i))h=!0;e(window).bind("scroll resize orientationchange load lockfixed:pageupdate",
a,function(k){if(!h||!document.activeElement||"INPUT"!==document.activeElement.nodeName){var d=0,d=a.outerHeight();k=a.outerWidth();var m=e(document).height()-b.offset.bottom,f=e(window).scrollTop();"fixed"!=a.css("position")&&(g=a.offset().top,c=parseInt(a.css("marginTop"),10),l=a.css("top"));f>=g-(c?c:0)-b.offset.top?(d=m<f+d+c+b.offset.top?f+d+c+b.offset.top-m:0,h?a.css({marginTop:parseInt((c?c:0)+(f-g-d)+2*b.offset.top,10)+"px"}):a.css({position:"fixed",top:b.offset.top-d+"px",width:k+"px"})):
a.css({position:n,top:l,width:k+"px",marginTop:(c?c:0)+"px"})}})}}})})(jQuery);

Подключаем скрипт в секцию <head>, добавляя вот такую строчку:

<script src="ПУТЬ_К_ФАЙЛУ/jquery.lockfixed.js"></script>

Если не подключена библиотека jQuery, то подключить и ее можно добавив ещё одну строчку в <head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Готово!

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

Пример плавающего блока вы можете наблюдать у меня на блоге:

Плавающий блок на 9SEO.RU

Вот, собственно, и все способы, которые я использую на своих сайтах. Если вы знаете еще какие-то поделитесь в комментариях.

Был ли пост полезен?
Да 11 Нет 2