Как зафиксировать сайдбар?

Недавно я задался вопросом о том, как зафиксировать сайдбар  с рекламой в меню сайта. И только я об этом подумал, как некоторые блогеры стали публиковать посты с решениями, как зафиксировать сайдбар. Один предлагал установить плагин, другой прописать в файлы темы несколько скриптов.

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

как зафиксировать сайдбар

А для этого потребуется всего-то кусок кода, который вписывается не в файлы шаблона, а создаётся в сайдбаре в виджете Текст (Произвольный текст или HTML-код).

Как зафиксировать сайдбар без плагинов?

Сначала код в студию:



Немного пояснений. Я уже не помню, на каком блоге я взял этот код и не знаю, кто его автор. Скажу только то, что код был с ошибкой, в нём стояла лишняя кавычка - вот такая ; - и валидатор кода ругался на неё. Я в самом коде жирным отметил циферки, которые нужно подрегулировать на своём сайте.

top':'30px - это высота от верхнего края. Некрасиво, когда баннер прилипает к верху, лучше сделать небольшой отступ.

width:370px - это ширина рекламного блока, её тоже можно задать экспериментально. У себя я сделал на 5px меньше самого сайдбара.

Теперь идем в админку WordPress - Внешний вид - Виджеты  и вставляем скрипт и код рекламы.

фиксированный сайдбар

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

Насколько эффективно такое расположение рекламы? Как показал мой небольшой опыт, такое расположение очень хорошо кликается, даже больше, чем реклама в начале статьи. Я убрал рекламу под статьёй и оставил этот блок. Сейчас я немного всё изменил по причине, которую пока сказать не могу, но потом я обязательно вернусь к такому расположению, так как оно оказалось достаточно эффективным. Вот как зафиксировать сайдбар самым простым способом!

Да, чтобы все работало, нужен скрипт и подгружаемая им библиотека:

Лучший способ не пропустить новую статью - ПОДПИСАТЬСЯ!

(Просмотров всего 406, просмотров сегодня 1 )

Понравилась красная кнопка? Возьми КОД и поставь себе на сайт:)

15 коммент. к записи “Как зафиксировать сайдбар?”

  • Отличный способ! Всё работает!

    Также обратил внимание на плагин вывода похожих постов в конце статьи. В аналогичных плагинах не встречал кнопки типа "Load more posts". Подскажите адресок откуда его можно скачать.

  • Специально для вас только что написал пост про этот плагин /kak-vyivesti-pohozhie-zapisi/ Пользуйтесь на здоровье!

  • Ого! Вместо простой ссылки на плагин оперативно родилась целая статья про него. Огромное спасибо!!!

  • Да я давно хотел озвучит, руки не доходили. А тут повод, так что вам спасибо!

  • У меня к сожалению не сработало, пробовал на двух темах. В итоге установил плагин Q2W3 Fixed Widget с помощью его можно сделать любой виджет плавающим.

  • @Сергей, Странно, у меня как раз только это и сработало, а плагин нет.

  • Спасибо. Подскажите, а как сделать чтобы при прокрутке рекламный блок стопорился на footer? А то как-то не эстетично на подвал залезает.

  • С это циферкой 1568px не пробовали поиграться?

  • Добрый день, подскажите как в этом коде прописать и отступ с низу, сверху есть 30, а снизу как?

    $(window).scroll(function() {if ($(this).scrollTop()>1910) $('#scrollable').css({'position':'fixed','top':'30px'});else $('#scrollable').css({'top':'1568px','position':'static'});});

  • А зачем снизу? Он же фиксируется относительно верха и зависает. Или что вы имеете ввиду?

  • у меня блок большой, и невидно самой нижней ссылки она залазит в низ за экран. Но только почему то в фаерфокс браузере, последней версии.

  • Этот код придумал не я, мне трудно в этом вам помочь. К тому же если это только на одном браузере, то это ещё все усложняет. А вы не пробовали вот этот плагин Q2W3 Fixed Widget я сейчас пользуюсь им и меня все устраивает.

  • так у меня dle, ок

  • Ясно, с DLE вообще не имел дело, только слышал. Код можно было бы подшаманить, но боюсь, что у меня будет работать совершенно не так, как у вас, так как у меня везде wordpress.

  • плавающий блок реализуется только для самого нижнего блока? можно сделать, например, самый верхний чтобы прилипал?

Оставьте свой комментарий, он будет замечен:) Спам тоже:(

vps

Об авторе - Заработок в интернете - Плагины - Репозитории - Команды

© Все права сохраняются. Копировать материалы без разрешения автора ЗАПРЕЩАЕТСЯ!

Просто Линукс - Просто о Linux, SEO и WEB. По всем вопросам пишите на

Яндекс.Метрика

Вверх!Вверх!