главная

Теги:


Делаем плагин для "липкого" информационного блока

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

Прежде чем начать кодирование стоит определить основные задачи, которые мы хотим решить:

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


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

Итак, основная структура нашего плагина определяется стандартно:

(function( $ ){

  $.fn.containedStickyScroll = function( options ) {

  /* Код плагина будет здесь */

  };
})( jQuery );

Данный код инициирует новый метод и присоединяет его к объекту jQuery. Теперь можно использовать метод, который называется containedStickyScroll, вызывая основной объект jQuery. Данный метод также использует набор опций, которые должны передаваться как объект JSON (как и в любом другом плагине jQuery). Для использования опций мы также должны определить набор значений по умолчанию, для случая, если пользователь не укажет их при использовании плагина. На практике плагин будет редко вызываться с установкой некоторых опций, а чаще всего будут использоваться вообще без указания значений опций. Поэтому очень важно определить значения по умолчанию, чтобы избежать неприятных ситуаций. Для установки значений по умолчанию создается простой объект:

var defaults = {
   unstick : true,
   easing: 'linear',
   duration: 500,
   queue: false,
   closeChar: '^',
   closeTop: 0,
   closeRight: 0
} 

Рассмотрим набор опций более подробно.

Опция unstick указывает плагину, что нужно активировать функцию перемещения блока. По умолчанию имеет значение true - блок будет перемещаться при прокрутке страницы.

Опции easing, duration и queue используются напрямую для метода jQuery.animate(), который осуществляет перемещение нашего блока по экрану. Значения по умолчанию наверняка подойдут для большинства случаев использования плагина.

Опции closeChar, closeTop и closeRight используются для управления элементом привязки блока к верху родительского контейнера. Опция closeChar указывает, какие символы использовать для индикации элемента, а closeTop и closeRight позволяют установить положение элемента управления относительно верха и правой стороны нашего блока соответственно.

Следующие две строчки кода устанавливают значения опции в соответствии с тем, что передано при инициализации плагина:

var options =  $.extend(defaults, options);
var $getObject = $(this).selector;

В первой строке происходит объединение значений по умолчанию, с теми, что переданы методу плагина. Те опции, которые были установлены явным образом, останутся без изменений, а остальные получать значения по умолчанию.Таким образом, мы получаем один объединенный объект, с которым будем работать дальше по коду.

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

Теперь приступим к созданию кода, который будет осуществлять основное функционирование плагина. На первый взгляд код может показаться сложным, но логика весьма проста:

jQuery(window).scroll(function() {
  if(jQuery(window).scrollTop() > (jQuery($getObject).parent().offset().top) &&
  (jQuery($getObject).parent().height() + jQuery($getObject).parent().position().top - 30) >
(jQuery(window).scrollTop() + jQuery($getObject).height())){ jQuery($getObject).animate({ top: (jQuery(window).scrollTop() - jQuery($getObject).parent() .offset().top) + "px" }, { queue: options.queue, easing: options.easing, duration: options.duration }); } else if(jQuery(window).scrollTop() < (jQuery($getObject).parent().offset().top)){ jQuery($getObject).animate({ top: "0px" }, { queue: options.queue, easing: options.easing, duration: options.duration }); } });

Если расписать алгоритм обычными словами, то получится следующая конструкция:

[Когда jQuery обнаруживает событие прокрутки страницы] {
  if(координата верха окна БОЛЬШЕ координаты верха элемента) AND
  (координата низа родительского контейнера БОЛЬШЕ координаты низа элемента){
    выполняем анимацию ({ устанавливаем координату верха элемента соответствующей 
значению координате верха окна },
    { используем опции queue, easing и duration });
  }
  else if(координата верха окна МЕНЬШЕ координаты верха элемента){
    выполняем анимацию({ устанавливаем координату верха элемента равной 0 },
    { используем опции queue, easing и duration });
  }
});

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

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

Например, наш элемент расположен на 130px от верха документа и имеет высоту 445px, то координата низа вычисляется как 130 + 445 = 575. Таким образом, низ элемента расположен на 575px от верха документа, и мы можем определить, надо ли перемещать его или нет.

Основная часть кода уже написана. Если проверить работу плагина в данной точке разработки, то функционирование перемещения блока при прокрутке страницы уже будет работать. Но осталось реализовать отключение перемещения блока. Мы сделаем это с помощью добавления немного HTML вниз нашего перемещающегося элемента и использования сгенерированного кода CSS для управления позиционированием. Дополнительно мы заключим процедуру в условие, чтобы запускать ее только при установлении для опции unstick значения true.

 

if(options.unstick == true){
  this.css('position','relative');
  this.append('' + options.closeChar + '');
  jQuery($getObject + ' .scrollFixIt').css('position','absolute');
  jQuery($getObject + ' .scrollFixIt').css('top',options.closeTop + 'px');
  jQuery($getObject + ' .scrollFixIt').css('right',options.closeTop + 'px');
  jQuery($getObject + ' .scrollFixIt').css('cursor','pointer');
  jQuery($getObject + ' .scrollFixIt').click(function() {
    jQuery($getObject).animate({ top: "0px" },
    { queue: options.queue, easing: options.easing, duration: options.duration });
    jQuery(window).unbind();
    jQuery('.scrollFixIt').remove();
  });
} 

Метод .append() добавляет HTML код, а метод .css() - CSS код. Метод .click() привязывает функцию для запуска процедуры в качестве обработчика события click для элемента отключения опции перемещения. Таким образом, когда на элементе управления перемещением нажимают кнопку мыши, то jQuery немедленно возвращает блок в его исходное положение. А затем используется метод .unbind() для деактивации обработчика события прокрутки окна и с помощью метода .remove() удаляется сгенерированная процедура отключения перемещения.

Вот и весь плагин.

В пакете с исходным кодом содержится полная и минимизированная версии плагина (.js файлы). А демонстрационная страница содержит описание использования плагина.

Источник урока: blog.echoenduring.com/2010/11/27/making-of-the-contained-sticky-scroll-jquery-plugin/

Урок Создан:2011-02-08 Просмотров:3440

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


Copyright© 2009 Hosted by Zhost