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

плавающий сайдбар

плавающий сайдбар


Иногда мне на е-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, о котором я написал в другой статье.

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

Поблагодарите автора репостом:
Предыдущие статьи:

16 комментариев к записи “Плавающий сайдбар — очень просто”

  • Денис

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

    • ARKSEO

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

  • Вячеслав

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

    • ARKSEO

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

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

  • SeVer

    Отладчик сообщил: is not a function с указанием на 4 строку твоего кода
    Ессно не работает.
    ВП 3,5,1, тема дефолтная — twentyten. Вставил в sidebar.php

    • ARKSEO

      Не работает с темой twentyten. И что? На второй Twenty Twelve — работает, только что проверил. А на остальных и самому можно проверить.

      Код рабочий. При том работает на любом сайте, с любым движком и без движка. А если не работает, то значит конфликт с уже с имеющимися скриптами на сайте.

      И он не мой, js я еще не изучал.

  • Сергей

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

  • Andre

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

    • ARKSEO

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

  • Дмитрий

    Здравствуйте. Подскажите пожалуйста, как сделать так, дабы блок внизу не наезжал на футтер? Тоесть, сверху отступ сделать можно, а вот внизу не получается. Функция margin-bottom не работает, а margin-top работает.
    Вот скрин, чтоб понятней было о чём я: _https://dl.dropboxusercontent.com/u/48357141/1.PNG

    Сорри, если вопрос нубский, ибо сам я нуб. Заранее спасибо.

    • ARKSEO

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

      А в этом коде сам не знаю как исправить этот косяк.

      • Дмитрий

        Пробовал, работает вроде нормально, но вот косяк всё же есть, и не понимаю почему
        Скрин: _https://dl.dropboxusercontent.com/u/48357141/2.PNG

        • Дмитрий

          Спасибо за ответ. Пробовал, но он у меня криво работает почему-то. И без понятия как решить.
          Скрины:
          сверху: _https://dl.dropboxusercontent.com/u/48357141/2.PNG ( опускает блок новостей под себя)
          внизу: _https://dl.dropboxusercontent.com/u/48357141/3.PNG ( нормально)

          • ARKSEO
            http://seodnevnik.ru/

            Скорее всего блок не причём и проблема в стилях вашего сайдбара.
            Возможно не хватает float: left для дива id="sidebar".
            Короче, со стилями поэкспериментируйте. Я так сходу не скажу.

            Я у себя на блоге проверял блок, он отлично работал.

  • Элементы зеркала
    http://avtozerkala.co.ua

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

Прокомментировать

Наверх ▲