Как сделать плавающий блок css
Обновлено: 07.07.2024
Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS.
В чем его особенность – при прокрутке сайдбар прилипает к верхней части окна, но при этом, когда сайдбар прокручивается до футера, тогда он отлипает от верхней части экрана и прилипает своей нижней частью к футеру, тем самым не перекрывая собой футер (футер должен быть высоким). Если вы понимаете, о чем я.
Пример взят с какого-то сайта и он очень примитивный (и устаревший морально), подходит только для данной верстки. Более универсальный код можно посмотреть в этой статье и уже самостоятельно писать свой код под свой проект.
Доброго времени суток 🙂
Сегодня речь пойдет о одном из способов как сделать Фиксированный блок, который при прокрутке двигается с задержкой, пример видно на моем сайте справа. Еще одним несомненным плюсом является то что блок не смещается при горизонтальной прокрутке, он остается в своей зоне. Если зафиксировать обычным свойством position:fixed, то увы таких преимуществ не будет. Для меня плавное перемещение с задержкой было не особо важным, а вот то что блок остается на своем месте при горизонтальной прокрутке, это была основная задача.
В общем хватит рассуждать, давайте уже что-то делать.
1. HTML разметка
В то место где нужно чтобы блок двигался, вставляем данную разметку. Обычно это место сайдбар. Главным элементом которой является блок div с ID fixed. Можете изменить, но потом не забудьте поменять название и в javascript и в CSS, чтобы потом не было проблем.
2. Скрипт фиксации
Как и всегда в подвале перед закрывающимся body или если вы предпочитаете, в шапке перед закрывающимся head
В четвертой строке можете установить значение Padding от верхнего края. В 11 строке если нужно меняем значение margin от верхнего края. По умолчанию они стоят 0. Просто пишите величину в пикселях, но просто цифру, например 100.
Ставьте только цифры, обозначение в пикселях - px указывать не надо!
3. CSS стили
Далее в файле стилей style.css, добавляем следующий код.
Ширину меняйте, стили добавляйте, но position:absolute не трогайте. Это основное условие в стилях для корректного отображения фиксированного блока.
Сделав все по инструкции, результат не заставит себя ждать. Теперь можете организовать то что Вам нужно.
На этом все, спасибо за внимание 🙂
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)
В этом уроке мы уделим внимание одному очень интересному плагину, фиче, библиотеке - называйте как хотите. Для того чтобы лучше понять работу плагина, применим его в небольшом проекте.
Слово от автора
Как веб-разработчики, мы каждый день имеем дело с какими-то готовыми фичами, будь то небольшой сниппет или целый фрэймворк. Если ваша задумка не имеет специфических требований, вполне вероятно, что вы найдёте какие-то готовые фишки для решения своей задачи. Но как правило такие находки рассчитаны на широкую аудиторию.
Именно поэтому, мы продолжаем серию уроков по некоторым плагинам, эффектам и продвинутым техникам. Если плагины будут небольшими, мы будет разбирать их на части и смотреть как происходит волшебство. В противном случае, будем создавать небольшие проекты для того, чтобы понять как их можно использовать в реальном мире.
Знакомимся с stickyFloat
Вот некоторая информация:
- Тип: плагин
- Технология: JavaScript [на jQuery]
- Функциональность: позволяет элементу перемещаться только в пределах заданного контейнера
- Родина: тут
Проблема
В принципе данная проблема может решаться и средствами CSS – в этом случае никакой JavaScript вам не понадобится. Выставите элементу position:fixed и будем вам счастье!, а точнее блок, который фиксируется в определённом месте на странице.
Но давайте посмотрим правде в глаза, этот вариант не будет работать одинаково во всех браузерах. С этой проблемой можно очень много намучаться, перебирая всевозможные варианты и в итоге вы всё равно придёте к мысли, что для этих целей лучше использовать скрипт.
Нам же необходимо, чтобы контент плавал по странице, когда мы перемещаемся по ней вверх и вниз, но в пределах родительского контейнера.
Поскольку сфера web-а очень широка, то вы с лёгкостью можете найти инструмент для решения этой проблемы. Давайте же рассмотрим один из них, на мой взгляд более практичный и надёжный.
Деконструируем логику
Логика работы данного плагина довольно-таки проста. Давайте я вам это докажу. Помните какую функциональность реализует данный плагин? Создаёт плавающий элемент:
Давайте рассмотрим небольшой mockup, демонстрирующий структуру нашей страницы:
Работа данного плагина можно разграничить на следующие шаги:
- Вычисляется текущая позиция родителя плавающего элемента относительно документа. На изображении отмечено как 1.
- Получаем высоту родителя – таким образом мы будем знать, когда остановить плавающий элемент, чтобы он не вышел за пределы родителя. Отмечено как 2.
- Вычисляем насколько мы спустились вниз - для этого нам необходимы данные о родителе - чтобы мы были уверенны, что не вышли за рамки диапазона. На изображении, расположенном выше, горизонтальная линия служит гипотетической верхней границей текущего отображения. В этом случае, расстоянием будет являться дистанция от точки до точки, формирующими прямую. Отмечено как 3.
- Используя те значения, которые мы вычислили выше, без особого труда можем узнать на какую позицию нам необходимо сместить плавающий элемент.
Если вам ничего не понятно, не переживайте. Давайте посмотрим на следующий пример:
- Плавающий элемент находится на расстоянии 10px от верхней границы своего родителя.
- Высота родителя 100px.
- Пользователь спустился на 50px в одном случае и на 150px в другом.
Зная эту информацию вы можете вычислить что:
В первом случае – плавающий элемент не должен перемещаться. Почему? Потому как мы не углубились в недры страницы, и у нас ещё осталось некоторое пространство, которое отображается у нас на экране.
Во втором случае – мы уже будем смещать. Когда мы спускаемся на 150px, 10 получаем от расстояния между плавающим элементом и родителем, остальное получаем от разницы двух, точек о которых говорили ранее.
Если вы и сейчас ничего не поняли, так же не расстраивайтесь. У вас будет ещё один шанс, когда рассмотрим код.
Разбираем код
Данный плагин занимает всего лишь 30 строк кода. Теперь, я бы хотел подробно остановиться на каждой строчке и растолковать её смысл. Код плагина:
Для того чтобы понять работу плагина, вам необходимо обладать хоть какими-то знаниями в JavaScript.
Шаг 1 - обычное начало для плагина на jQuery. Как вы знаете, параметр options это специальный объект, который содержит инициализирующие данные для плагина. lockBottom, определяет будет ли плавающий элемент находиться внизу родителя или исчезнет. Тут всё.
Шаг 3 - Вычисляем внутренний отступ от элемента родителя и сохраняем эти данные для дальнейшего использования.
Шаг 4 - Тут мы вычислили позицию родительского элемента, используя встроенный jQuery метод offset. Нам не раз придётся обращаться к данному элементу. Переменная $obj содержит плавающий элемент. Почитайте jQuery API документацию, если вы не знакомы с этими методами.
Шаг 5 - такие действия можно часто увидеть при разработке плагина на jQuery. Вообще это хорошая практика, придавать переменным значения по умолчанию.
Шаг 6 - В работе плагина часто будет использоваться значение CSS top, так что нам необходимо приписать плавающему элементу абсолютное позиционирование в случае, если мы не сделали это раньше.
Шаг 7 - выше я объяснил зачем необходимо значение переменной lockBottom. Если оно true, то мы начинаем делать расчёты. Мы вычисляем точку, согласно которой нам необходимо спозиционировать элемент.
Вообще это можно сделать путём вычисления высоты родителя, плавающего блока со всеми отступами, однако такой вариант может привести к непредсказуемым последствиям.
Шаг 8 - Мы помещаем наш код в анонимную функцию, применяя событие окна scroll. Это конечно не такой уж эффективный способ, но так уж сделал автор плагина.
Шаг 9 - В первую очередь нам необходимо остановить всю анимацию, которая присутствует на странице. Для этого будем использовать метод stop.
Шаг 10 - данные три переменные содержат значения, которые нам понадобятся в дальнейшем.
- pastStartOffset проверяет, не перешли ли мы верхнюю границу родительского элемента. Запомните, мы используем метод offset для того, чтобы найти расстояние между началом страницы и родительским элементом. Для того чтобы узнать как далеко мы ушли вниз используем метод scrollTop. Это расстояние между началом документа и текущим положением плавающего блока.
- objFartherThanTopPos проверяет находиться ли плавающий элемент в позиции, предоставленной ему по умолчанию — в верхней части родительского элемента. Если мы поднимаем страницу выходим за грани родителя, то в этом случае не запускаем перемещение.
- objBiggerThanWindow проверяет, не превышает ли высота плавающего элемента размер окна. Если это так, то нет никакого смысла применять данный эффект.
Шаг 11 - Это как раз то место, где плагин вычисляет нужно ли ему двигать элемент. Процесс таков:
- Проводится проверка, вычисляющая находится ли пользователь в диапазоне родительского элемента. Так же мы проверяем позицию плавающего элемента: находится ли она вверху или внизу.
- Как уже было оговорено, мы применяем плагин только в том случае если размер плавающего элемента не превышает размеры окна.
Начинаем анимацию если оба этих условия истинны.
Шаг 12 - Тут мы определяем переменную newpos, которая будет хранить позицию на которую нам необходимо перевести плавающий элемент. Как вы уже поняли, расчёты легче понять, если тщательно изучить изображение в самом начале урока. Получаем расстояние, на которое мы сместились, добавляем расстояние верхнего отступа родителя и вычитаем расстояние от начала страницы до родителя – вот так вот. Данные расчёты помогут получить нам расстояние в пикселях, на какую позицию нам необходимо поместить плавающий элемент.
Шаг 13 - Если мы спустились ниже положенного диапазона просто ставим данному элементу позицию нижней границы.
Шаг 14 - Если мы вышли за верхние границы, то делаем тоже самое только с другими значениями.
Шаг 15 - Вот и всё! Мы просто делаем анимацию через jQuery метод animate, передав в top полученное значение.
У position: sticky уже очень неплохая браузерная поддержка, но большинство разработчиков так и не используют это свойство.
У этого есть две основные причины: во-первых, браузерам потребовалось много времени на реализацию адекватной поддержки этого свойства. И все просто успели забыть о нём.
Во-вторых, многие разработчики до конца не понимают логику, по которой это свойство работает. И тут появляюсь я!
Я полагаю, что вы хорошо знакомы с позиционированием в CSS, но давайте кратко повторим основные моменты:
Ещё три года назад существовало четыре типа позиционирования: static , relative , absolute и fixed .
Новое значение sticky похоже на все предыдущие значения сразу. Я проиллюстрирую это чуть позже.
При первом знакомстве с position: sticky все быстро понимают, что элемент залипает, когда область просмотра достигает определённой позиции.
Когда я добавлял больше элементов внутрь родителя-обёртки всё начинало работать как ожидалось.
Почему так происходит?
Причина кроется в том, что элемент с position: sticky может перемещаться только в пределах контейнера, в котором находится. А поскольку в моём случае он был единственным ребёнком, у него не было элементов-братьев, поверх которых он мог перемещаться.
Как на самом деле работает position: sticky в CSS
Читайте также: