Делаем плавающий виджет на WordPress сайте

Плагины для WordPress WordSmall

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

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

Плагин Q2W3 Fixed Widget

fixed widget

Плагин Fixed Widget после его установки добавляет новый параметр «Зафиксировать виджет» ко всем виджетам сайта. Таким образом, допускается возможность выбора нескольких виджетов, если в этом есть нужда. Настройки плагина найдете на вкладке «Внешний вид – Фикс. Виджеты». Он полностью русифицирован, так что, особо нечего комментировать, тем более что, по умолчанию его настройки оптимальные.

Внимание! Плагин может работать не со всеми темами. У него есть несколько требований: библиотека jQuery должна быть версией 1.7/1.8 (или более поздняя), не должно быть JavaScript ошибок, наличие функций wp_head() и wp_footer().
А также встречается некорректность при движении элемента (подпрыгивание), что исправляется путем редактирования CSS.

Плавающий блок (виджет) с помощью jQuery

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

<script>
jQuery(document).ready(function() {

$('класс или id').addClass('original').clone().insertAfter('класс или id').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               
  if ($(window).scrollTop() >= (orgElementTop)) {
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}
});
</script>

Обратите внимание на места, где сказано прописывать класс или id блоков, чтобы не забыли.

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code