Плавающий сайдбар — очень просто

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

О похожем сайдбаре я упоминал здесь, но в том способе он реально плавает :), а здесь фиксируется.

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

Шаг первый, добавляем этот код в то место, где будет ваш будущий плавающий блок:

(в движке DLE это обычно файл main.tpl, а в wordpress-е это файл sidebar.php)

<div> 

<script> 
$(window).scroll(function() { 
if ($(this).scrollTop()>500) $('#scrollable').css({'position':'fixed','top':'0px'}); 
else $('#scrollable').css({'top':'500px','position':'absolute'}); 
}); 
</script>

<div id='scrollable' style='width:300px;height:300px;'>   
ЗДЕСЬ КОНТЕНТ, КОТОРЫЙ БУДЕТ ФИКСИРОВАТЬСЯ (ПЛАВАТЬ)
</div>

</div>
  1. В коде есть два значения 500 – это отступ от верхней границы сайта, до места, где начинается тот блок, который должен будет плавать. Методом тыка подберите те цифры, которые подойдут для вашего сайта.
  2. А также есть значения 300 на 300 – это непосредственно размер вашего блока. Выставьте нужные вам значения, иначе блок будет показываться не полностью.

Шаг второй, если у вас не подключена библиотека jquery

Если после первого шага блок не работает , то перед тегом </head> вставляем строчку:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

Можете подключить библиотеку jquery по-новее, если хотите. В данном случае версия 1.3.2.

На этом все, должно работать.

Единственное с чем может возникнуть косяк, так это конфликт jquery с другими библиотеками, которые у вас возможно подключены. Они обычно подключены, если у вас используются на сайте какие-либо слайдеры и что-то в этом роде.

UPDATE. Есть один минус этого блока: если он большой, то наезжает на футер. В таком случае попробуйте скользящий блок на jQuery, о котором я написал в другой статье.

Есть еще удобный плагин для WordPress- Q2W3 Fixed Widget, он вообще не требует ковыряний в коде (сейчас именно он стоит у меня на этом сайте). Просто устанавливаете его и в любом виджете появляется возможность с помощью галочки сделать его плавающим.

P.S. Если что-то не получилось, напишите в комментариях или мне, через страницу «Контакты», разберёмся вместе.

Оцените статью
Дневник Сеошника
Добавить комментарий

  1. Денис

    Хочу выразить огромную благодарность этому человеку. Сколько бился над этим сайдбаром и ничего не получалось. Попросил объяснить и теперь имею на сайте плавающий сайдбар. Единственный вопрос: а как поисковики реагируют на этот сайдбар?

    Ответить
    1. ARKSEO

      Скажу только, что у меня на блоге около двух месяцев уже этот код стоит и разницы в трафике не заметил.

      Ответить
  2. Вячеслав

    Привет, я установил у себя на сайте. да вот проблема, как сделать так чтоб реклама не наезжала на футер? И не нарушаются ли правила адсенс?

    Ответить
    1. ARKSEO

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

      Ответить
  3. SeVer

    Отладчик сообщил: is not a function с указанием на 4 строку твоего кода

    Ессно не работает.

    ВП 3,5,1, тема дефолтная — twentyten. Вставил в sidebar.php

    Ответить
    1. ARKSEO

      Не работает с темой twentyten. И что? На второй Twenty Twelve — работает, только что проверил. А на остальных и самому можно проверить.
      Код рабочий. При том работает на любом сайте, с любым движком и без движка. А если не работает, то значит конфликт с уже с имеющимися скриптами на сайте.
      И он не мой, js я еще не изучал.

      Ответить
  4. Сергей

    Спасибо большое! Всё получилось, не думал, что всё так просто…

    Единственное хочется спросить — как сделать так, что бы этот блок не вылезал на футер сайта(если футер небольшой), а оставался в пределах этого блока…т.е. нужно ограничение по «bottom»…

    Как это реализовать в этом коде?

    Заранее спасибо..

    Ответить
    1. ARKSEO

      Я уже отвечал, что не в курсе как это реализовать в этом коде т.к. не спец. в JS.
      Но, есть еще один способ, как реализовать такой плавающий сайдбар, писал вот здесь https://seodnevnik.ru/sozdanie-sajtov/skolzyashhij-blok-na-jquery-v-sajdbare.html
      Там блок на футер не наезжает.

      Ответить
  5. Andre

    Спасибо за блок, все заработало. Много чего до этого перепробовал на шаблоне WP.

    Ответить
    1. ARKSEO

      Мне пришлось часть коммента убрать, так как ваш код не отобразился.

      Ответить
  6. Дмитрий

    Здравствуйте. Подскажите пожалуйста, как сделать так, дабы блок внизу не наезжал на футтер? Тоесть, сверху отступ сделать можно, а вот внизу не получается. Функция margin-bottom не работает, а margin-top работает.

    Вот скрин, чтоб понятней было о чём я: _https://dl.dropboxusercontent.com/u/48357141/1.PNG
    Сорри, если вопрос нубский, ибо сам я нуб. Заранее спасибо.

    Ответить
    1. ARKSEO

      Попробуйте сделать скользящий блок на jQuery. Там такой проблемы нету.
      А в этом коде сам не знаю как исправить этот косяк.

      Ответить
      1. Дмитрий

        Пробовал, работает вроде нормально, но вот косяк всё же есть, и не понимаю почему

        Скрин: _https://dl.dropboxusercontent.com/u/48357141/2.PNG

        Ответить
        1. Дмитрий

          Спасибо за ответ. Пробовал, но он у меня криво работает почему-то. И без понятия как решить.

          Скрины:

          сверху: _https://dl.dropboxusercontent.com/u/48357141/2.PNG ( опускает блок новостей под себя)

          внизу: _https://dl.dropboxusercontent.com/u/48357141/3.PNG ( нормально)

          Ответить
          1. ARKSEO

            Скорее всего блок не причём и проблема в стилях вашего сайдбара.

            Возможно не хватает float: left для дива id=»sidebar».

            Короче, со стилями поэкспериментируйте. Я так сходу не скажу.
            Я у себя на блоге проверял блок, он отлично работал.

  7. Элементы зеркала

    А применимо это к опенкарту?

    Ответить
  8. andrgame

    Хорошая статья, спасибо очень помогли, сделал у себя так же

    Ответить
  9. Сергей

    Ну вот, а то какие-то плагины советуют. Спасибочки.

    Ответить