Создаём плавающие блоки

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

Слово от автора

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

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

Знакомимся с stickyFloat

Вот некоторая информация:

  • Тип: плагин
  • Технология: JavaScript [на jQuery]
  • Функциональность: позволяет элементу перемещаться только в пределах заданного контейнера
  • Родина: тут

Проблема

В принципе данная проблема может решаться и средствами CSS – в этом случае никакой JavaScript вам не понадобится. Выставите элементу position:fixed и будем вам счастье!, а точнее блок, который фиксируется в определённом месте на странице.

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

Нам же необходимо, чтобы контент плавал по странице, когда мы перемещаемся по ней вверх и вниз, но в пределах родительского контейнера.

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

Деконструируем логику

Логика работы данного плагина довольно-таки проста. Давайте я вам это докажу. Помните какую функциональность реализует данный плагин? Создаёт плавающий элемент:

Давайте рассмотрим небольшой mockup, демонстрирующий структуру нашей страницы:

Работа данного плагина можно разграничить на следующие шаги:

  • Вычисляется текущая позиция родителя плавающего элемента относительно документа. На изображении отмечено как 1.
  • Получаем высоту родителя – таким образом мы будем знать, когда остановить плавающий элемент, чтобы он не вышел за пределы родителя. Отмечено как 2.
  • Вычисляем насколько мы спустились вниз - для этого нам необходимы данные о родителе - чтобы мы были уверенны, что не вышли за рамки диапазона. На изображении, расположенном выше, горизонтальная линия служит гипотетической верхней границей текущего отображения. В этом случае, расстоянием будет являться дистанция от точки до точки, формирующими прямую. Отмечено как 3.
  • Используя те значения, которые мы вычислили выше, без особого труда можем узнать на какую позицию нам необходимо сместить плавающий элемент.

Если вам ничего не понятно, не переживайте. Давайте посмотрим на следующий пример:

  • Плавающий элемент находится на расстоянии 10px от верхней границы своего родителя.
  • Высота родителя 100px.
  • Пользователь спустился на 50px в одном случае и на 150px в другом.

Зная эту информацию вы можете вычислить что:

В первом случае – плавающий элемент не должен перемещаться. Почему? Потому как мы не углубились в недры страницы, и у нас ещё осталось некоторое пространство, которое отображается у нас на экране.

Во втором случае – мы уже будем смещать. Когда мы спускаемся на 150px, 10 получаем от расстояния между плавающим элементом и родителем, остальное получаем от разницы двух, точек о которых говорили ранее.

Если вы и сейчас ничего не поняли, так же не расстраивайтесь. У вас будет ещё один шанс, когда рассмотрим код.

Разбираем код

Данный плагин занимает всего лишь 30 строк кода. Теперь, я бы хотел подробно остановиться на каждой строчке и растолковать её смысл. Код плагина:

$.fn.stickyfloat = function(options, lockBottom) {
                var $obj                = this;
                var parentPaddingTop    = parseInt($obj.parent().css('padding-top'));
                var startOffset         = $obj.parent().offset().top;
                var opts                = $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);

                $obj.css({ position: 'absolute' });

                if(opts.lockBottom){
                    var bottomPos = $obj.parent().height() - $obj.height() + parentPaddingTop;
                    if( bottomPos < 0 )
                        bottomPos = 0;
                }

                $(window).scroll(function () {
                    $obj.stop();

                    var pastStartOffset         = $(document).scrollTop() > opts.startOffset;
                    var objFartherThanTopPos    = $obj.offset().top > startOffset;
                    var objBiggerThanWindow     = $obj.outerHeight() < $(window).height();

                    if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){
                        var newpos = ($(document).scrollTop() -startOffset + opts.offsetY );
                        if ( newpos > bottomPos )
                            newpos = bottomPos;
                        if ( $(document).scrollTop() < opts.startOffset )
                            newpos = parentPaddingTop;

                        $obj.animate({ top: newpos }, opts.duration );
                    }
                });
            };

Для того чтобы понять работу плагина, вам необходимо обладать хоть какими-то знаниями в JavaScript.

$.fn.stickyfloat = function(options, lockBottom)  {};

Шаг 1 - обычное начало для плагина на jQuery. Как вы знаете, параметр options это специальный объект, который содержит инициализирующие данные для плагина. lockBottom, определяет будет ли плавающий элемент находиться внизу родителя или исчезнет. Тут всё.

Шаг 2 - Получаем доступ к элементу. В этом контексте, this ссылается на элемент DOM, который мы передали в функцию. К примеру, если вы передали в метод #menu, this будет указывать на элемент страницы с данным ID.

var parentPaddingTop = parseInt($obj.parent().css('padding-top'));

Шаг 3 - Вычисляем внутренний отступ от элемента родителя и сохраняем эти данные для дальнейшего использования.

var startOffset = $obj.parent().offset().top;

Шаг 4 - Тут мы вычислили позицию родительского элемента, используя встроенный jQuery метод offset. Нам не раз придётся обращаться к данному элементу. Переменная $obj содержит плавающий элемент. Почитайте jQuery API документацию, если вы не знакомы с этими методами.

var opts= $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);

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

$obj.css({ position: 'absolute' });

Шаг 6 - В работе плагина часто будет использоваться значение CSS top, так что нам необходимо приписать плавающему элементу абсолютное позиционирование в случае, если мы не сделали это раньше.

if(opts.lockBottom){
    var bottomPos = $obj.parent().height() - $obj.height() + parentPaddingTop;
    if( bottomPos < 0 )
        bottomPos = 0;
}

Шаг 7 - выше я объяснил зачем необходимо значение переменной lockBottom. Если оно true, то мы начинаем делать расчёты. Мы вычисляем точку, согласно которой нам необходимо спозиционировать элемент.

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

$(window).scroll(function () { // Lots of code })

Шаг 8 - Мы помещаем наш код в анонимную функцию, применяя событие окна scroll. Это конечно не такой уж эффективный способ, но так уж сделал автор плагина.

Шаг 9 - В первую очередь нам необходимо остановить всю анимацию, которая присутствует на странице. Для этого будем использовать метод stop.

var pastStartOffset = $(document).scrollTop() > opts.startOffset;
var objFartherThanTopPos    = $obj.offset().top > startOffset;
var objBiggerThanWindow     = $obj.outerHeight() < $(window).height();

Шаг 10 - данные три переменные содержат значения, которые нам понадобятся в дальнейшем.

  • pastStartOffset проверяет, не перешли ли мы верхнюю границу родительского элемента. Запомните, мы используем метод offset для того, чтобы найти расстояние между началом страницы и родительским элементом. Для того чтобы узнать как далеко мы ушли вниз используем метод scrollTop. Это расстояние между началом документа и текущим положением плавающего блока.
  • objFartherThanTopPos проверяет находиться ли плавающий элемент в позиции, предоставленной ему по умолчанию — в верхней части родительского элемента. Если мы поднимаем страницу выходим за грани родителя, то в этом случае не запускаем перемещение.
  • objBiggerThanWindow проверяет, не превышает ли высота плавающего элемента размер окна. Если это так, то нет никакого смысла применять данный эффект.
if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){ // More code }

Шаг 11 - Это как раз то место, где плагин вычисляет нужно ли ему двигать элемент. Процесс таков:

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

Начинаем анимацию если оба этих условия истинны.

var newpos = ($(document).scrollTop() -startOffset + opts.offsetY );

Шаг 12 - Тут мы определяем переменную newpos, которая будет хранить позицию на которую нам необходимо перевести плавающий элемент. Как вы уже поняли, расчёты легче понять, если тщательно изучить изображение в самом начале урока. Получаем расстояние, на которое мы сместились, добавляем расстояние верхнего отступа родителя и вычитаем расстояние от начала страницы до родителя – вот так вот. Данные расчёты помогут получить нам расстояние в пикселях, на какую позицию нам необходимо поместить плавающий элемент.

if ( newpos > bottomPos ) newpos = bottomPos;

Шаг 13 - Если мы спустились ниже положенного диапазона просто ставим данному элементу позицию нижней границы.

if ( $(document).scrollTop() < opts.startOffset ) newpos = parentPaddingTop;

Шаг 14 - Если мы вышли за верхние границы, то делаем тоже самое только с другими значениями.

$obj.animate({ top: newpos }, opts.duration ); 

Шаг 15 - Вот и всё! Мы просто делаем анимацию через jQuery метод animate, передав в top полученное значение.

Использование

Если вы ещё не поняли как использовать данный плагин, то вот вам пример:

$('#menu').stickyfloat({ duration: 500 });>

Теперь мы напишем мини проект, где будем использовать данный плагин.

HTML

<div class="section">
<div id="menu" class="menu">Sticky menu</div>
<div class="content">I wanted to write something incredibly, unabashedly witty here. I failed. <img src="http://net.tutsplus.com/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> </div>
</div>

<div class="section">
<div id="menu2" class="menu">Yep, I'll follow you everywhere as long as you're within my parent</div>
<div class="content">You were expecting something clever here, didn't you? I know you did! Fess up!</div>
</div>

CSS

.section {
    padding:10px;
    width:900px;
    margin:0 auto;
    background-color:#f1f1f1;
    position:relative;
}

.section .content {
    height:800px;
    background-color:#ddd;
    margin-left:250px;
    text-align:center;
    color:#333;
    font-size:16px;
}

.section .menu {
    position:absolute;
    left:10px;
    width:240px;
    height:100px;
    background: #06C;
    text-align:center;
    color:#fff;
    font-size:14px;
}

JavaScript

$('#menu').stickyfloat({ duration: 400 });
$('#menu2').stickyfloat({ duration: 400 });

Вот и всё

Пришло время прощаться. В этом уроке мы рассмотрели работу очень полезного плагина, прошлись по его функционалу и создали мини проект для демонстрации его работы.

Спасибо за внимание!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/r0s-3VJj5qk/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Создаём плавающие блоки | | 2012-06-25 16:21:17 | | Статьи Web-мастеру | | В этом уроке мы уделим внимание одному очень интересному плагину, фиче, библиотеке - называйте как хотите. Для того чтобы лучше понять работу плагина, применим его в небольшом проекте.Слово от | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: