Плавающий блок на CSS и jQuery

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

Как зафиксировать блок на сайте при помощи CSS

Рассмотрим на примере вот такой вот кнопки:
jnAypPnuMQwj2Z
Ее HTML код:

Применяем свойство CSS position: fixed. Но, вы должны четко понимать как это работает. Вы можете написать что-то типа такого:

Так делать НЕ НУЖНО. И хотя вам кажется, что всё отлично, но это не так. Попробуйте просто уменьшить масштаб страницы в вашем браузере — кнопка останется на своем месте, и не будет привязана к ширине вашей формы. В случае с position: absolute это бы помогло, если конечно у нас есть родительский контейнер с position: relative и какой-то заданной шириной. Но с fixed в этом плане немного всё туго.

Давайте просто поместим нашу кнопку в какое-то место на странице или на сайте (обязательно в контейнер с шириной и margin: 0 auto) и просто напишем position: fixed. Как видите, даже не смотря на то что прописана фиксированная позиция, кнопка стоит на том месте где и должна и никуда не сползает даже если мы будем масштабировать.

К сожалению, когда мы задаем ей координаты, как в примере выше (особенно это касается left и right), position fixed отсчитывает их не от ширины родительского контейнера а от окна браузера. Выходом из данный ситуации будет использования margin-left. Тут стоит отметить, что margin-right вообще не работает (по крайней мере у меня 🙂 ). Вот CSS код:

Стили для кнопки можете подобрать на свой вкус, и не забывайте про z-index. Именно это свойство отображает элементы относительно друг друга, так сказать, задавая им приоритет по оси Z. Чтобы лучше понять как это работает, представьте себе листы бумаги на иголке, и чем больше z-index, тем раньше будет виден лист 🙂 .

Как узнать высоту элемента и текущий отступ сверху при помощи javascript

Теперь, когда уже есть наша кнопка, мы можем увидеть следующую проблему — кнопка заползает на наш header и footer, а мы этого не хотим. Нас устраивает вариант когда кнопка либо исчезает либо останется на своем месте. Рассмотрим 1ый вариант. Нам необходимо определить на какой именно высоте от верха страницы мы сейчас находимся.

Прицепимся к событию при скролле:

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

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

Запишу на примере второго свойства:

где, $(‘.bx_order_make’).height() — высота динамического блока, которую мы не можем знать наверняка.

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

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года.

Предоставляю услуги по созданию проектов на CMS 1С-Битрикс - сайты, шаблоны и компоненты с нуля.

Другие виды работ:
  • Доработка функционала на уже существующих проектах
  • Вёрстка макетов (HTML, CSS, JavaScript, jQuery, JADE, SASS, Gulp)
  • Скрипты на PHP и JS (jQuery)

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.

E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *