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

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

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

Плюс этого способа еще в том, что у вас остается ваш сайдбар и при этом, когда у вас большая статья, при перемотке вниз, сайдбар не пустует, а за счет того, что блок постоянно на виду, повышается 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='http://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. Если что-то не получилось, напишите в комментариях или мне, через страницу «Контакты», разберёмся вместе.

Читайте также:   Как проверить историю домена
Понравилась статья? Поделиться с друзьями:
Комментариев: 17
  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

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

Добавить комментарий