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

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

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

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

Знакомимся с 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

Статьи по теме

Комментирование кода и генерация документации в PHP

Зачем нужны комментарии к программному коду? В каком виде их писать? Где они нужны, а где нет? Как правильно комментировать код? Как прид�...

2024-04-22

Что такое CSS-модули и зачем они нам?

В последнее время меня интригуют CSS-модули. Если вы о них не слышали — эта статья для вас. Мы рассмотрим, что это за проект, какие задачи о�...

2024-04-22

23 сервиса для эффективного экспресс-аудита любого сайта

Аудит сайта – комплексный процесс, который позволяет оценить эффективность сайта и понять, на каком этапе теряются продажи, почему люди...

2024-04-17

Яндекс переходит на новую версию Wordstat

Часть старой функциональности уже недоступна. Обновленный Яндекс Вордстат полностью перейдет на основной домен wordstat.ru 20 марта. С...

2024-04-08

Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть

Она умеет распознавать эмоции человека по голосу. Алгоритм-эмпат определяет характер речи пользователя: говорит он с явным негатив...

2024-04-08

Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI

Скорость обработки сложных научных статей составляет менее трех секунд. Новое поколение моделей ИИ от компании Antropic под названием Cl...

2024-04-08

Как пользоваться GPT 4 и Claude бесплатно и без VPN

Как бесплатно пользоваться GPT 4, его плагинами, а также новой нейросетью Claude 3? Это можно делать в рамках одного сайта, который называет�...

2024-04-08

Как использовать анимацию с помощью JavaScript-библиотеки GSAP

Узнайте, как использовать мощную JavaScript-библиотеку GSAP для создания захватывающих анимаций на веб-страницах, освоив основы и примеры. GSAP...

2024-03-13

Использование GSAP 3 для веб-анимации

Использование GSAP 3 для веб-анимации От автора: Greensock Animation Platform (GSAP) — это простая в использовании библиотека JavaScript для веб-анимации....

2024-03-13

Мерч и IT: на что обратить внимание в 2024 году

Оглавление Смена поколений Живой контакт Трансляция ценностей Офлайн-мероприятия Пользоввательский контент Биг б�...

2024-02-17

Копируем с RSync: основные примеры синхронизации файлов

RSync это быстрый и чрезвычайно универсальный инструмент для синхронизации (копирования) файлов. Его самое основное преимущество это пер...

2024-02-16

Лучшие noCode AI платформы для создания диалоговых ботов

Про GPT знают уже все, да? Но даже про его возможности не все осведомлены. Например, знаете ли вы, что GPT можно обучать непосредственно н�...

2024-02-15

Факторы ранжирования Google 2024 — исследование Semrush

Рассказываем самое важное об исследовании более 60 предполагаемых факторов ранжирования. Компания Semrush провела исследование...

2024-02-14

Перенос сайта на другой хостинг

Как перенести сайт на хостинг самостоятельно, что подготовить до и проверить после смены хостинг-провайдера. Содержание Бэ...

2024-02-12

В России сформирован реестр хостинг-провайдеров

Роскомнадзор сформировал реестр провайдеров хостинга. С 1 февраля компаниям, не включенным в этот реестр, запрещено оказывать услуги х�...

2024-02-05