Как добавить плавающий блок на страницу
easy

Как добавить плавающий блок на страницу

Иногда это и правда нужно.

Что делаем: плавающий блок на странице, чтобы его содержимое всегда было на экране даже при скролле. При этом чтобы у него было «исходное» место на странице: например, кнопка стоит в начале страницы, а потом мы скроллим страницу вниз, а кнопка залипает. А когда мы скроллим обратно, в нужном месте кнопка прилипает обратно на нужное место. 

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

Время: 5 минут.

С чем работаем: JavaScript, jQuery и CSS.

Что понадобится: bootstrap для разметки страницы.

👉 Благодаря развитию технологий такую штуку можно сделать буквально за одну команду: 

  • С помощью css-свойства position:sticky. Тогда всё будет работать именно так, как нам надо, но будет поддерживаться не во всех браузерах.
  • С помощью position:fixed. Тогда блок будет просто всё время в одном месте на экране, без «домашнего» положения. Например, кнопка будет всегда висеть в правом верхнем углу экрана, как бы мы ни крутили страницу. 

В принципе, поддержка position:sticky становится всё лучше, поэтому можно было бы остановиться на ней. Но ради любви к истории и из соображений паранойи воспользуемся костылями, которыми пользовались разработчики последние 10 лет: используем jQuery.

1. Размечаем страницу

Смысл такой: мы делим страницу на две части: с основным содержимым и плавающий блок. Основной части дадим 10 виртуальных колонок, а плавающему блоку — 2 оставшиеся. Для этого мы используем фреймворк Bootstrap, но можно и просто сверстать что-то вручную.

Если нужно, чтобы блок был слева — поменяйте местами их в коде с основным блоком.

<section>
  <div class="row">

    <!-- основной блок шириной 10 колонок -->
    <div class="col-md-10">
      <!-- сюда кладём то, что будет вести себя как обычная страница -->
      <div class="content-block">
        <h3>Заголовок</h3>
        <p>Тут — любой текст, картинки или что-то ещё. Это же бутстрап, здесь можно всё.</p>
      </div>
    </div>

    <!-- А здесь — наш плавающий блок -->
    <div class="col-md-2">
      <div class="float-block">
        <!-- здесь тоже можно прописать что угодно -->
      </div>
    </div>
    
  </div>
</section>

2. Добавляем стили

Стили помогут настроить нам внешний вид каждого блока так, как нам нужно. Их нужно добавить в раздел <style> или подключить отдельным .css-файлом.

/* отвечает за оба блока в целом */
section{
  max-width: 600px;
  margin:0 auto;
}

/* настройки основного блока */
.col-md-10{
  min-height: 900px;
} 
.content-block{
  padding: 15px;
}

/* настройки плавающего блока */
/* для наглядности это будет пока красный квадрат */
.float-block{
  background-color: red;
  height: 50px;
  width: 50px;
  position:absolute;
  top: 150px;
}

3. Включаем «липкость»

Логика такая: нужный нам блок (например, кнопка) живёт в странице как обычный объект. Но когда мы доскролливаем до определённого места, этот блок «вырывается» из общего потока страницы и прикрепляется к экрану справа наверху. 

Это поведение в современных браузерах реализовывается в css так:

.float-block{position:sticky}

Но мы ориентируемся не только на современные браузеры. Поэтому используем тяжёлую артиллерию.

Подключаем jQuery к странице в разделе <head>:

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

Теперь добавляем скрипт, который даст нам нужное поведение для блоков. Его можно добавить тегом <script> или вынести в отдельный файл.

// «Липкий» код
$(function(){
  $.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'fixed',
                top: 10
            });
        } else {
            $this.css({
                position: 'absolute',
                top: 150
            });
        }
    });
};

$('.float-block').followTo(140);
});

По сути, этот скрипт говорит: «Если мы доскроллили ниже этого элемента, скажи ему position:fixed. А если выше, скажи ему position:absolute». 

Вопрос из зала: «Почему вы используете jQuery, чтобы тупо обратиться к объекту на странице? Нельзя было просто написать обращение вручную, раз уж вы делаете всё на костылях»?

Отвечает Миша Полянин: 

Причины две: 

  1. Sticky работает не всегда правильно во всех браузерах. Бывают ситуации, когда даже в зависимости от версии одного и того же браузера результат на экране и поведение отличаются от ожидаемого. 
  2. Есть элементы, с которыми sticky вообще не работает или работает через раз, например, если у контейнера есть свойство overflow: hidden. А вот jQuery вообще всё равно, какие у кого свойства, главное — получить доступ к нужному элементу, и можно делать с ним что угодно. 

Но если подходить к объектам на странице глобально, то получается, что на практике работать с элементами через jQuery получается удобнее:

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

Посмотреть, как работает, и поиграть с кодом на CodePen.

Текст и код

Миша Полянин


Редактор

Максим Ильяхов


Корректор

Ира Михеева


Иллюстратор

Даня Берковский


Вёрстка

Маша Дронова


Доставка

Олег Вешкурцев

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
easy