Как сделать фиксированный сайдбар на странице с прокруткой с помощью ScrollMagic.js

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

В этом руководстве мы будем использовать ScrollMagic.js, чрезвычайно популярную библиотеку JavaScript для создания сайдбара, который становится фиксированным при прокрутке страницы. В трех шагах (HTML, CSS и JavaScript) мы рассмотрим весь процесс.

Вот что мы собираемся создать (ознакомьтесь с полноэкранной версией, чтобы почувствовать всю магию):

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

Что такое ScrollMagic.js?

Для лучшего описания ScrollMagic мы перейдем на страницу Github:

"Библиотека javascript для магической прокрутки.”

Созданный Jan Paepke, он может быть эффективно объединен с Greensock Animation Platform (GSAP) для создания сложных и привлекательных анимаций JavaScript. Чтобы лучше понять возможности ScrollMagic, ознакомьтесь с этим списком примеров и с этими учебниками и курсами на Tuts+.

Начало работы с ScrollMagic.js

Чтобы начать работу с ScrollMagic, сначала нужно включить его в свои проекты. Вы можете загрузить его, посетив репозиторий GitHub, используя диспетчер пакетов (например, npm) или загрузив необходимые ресурсы через CDN (например, cdnjs).

Для нашей демонстрации мы выберем последний вариант. Имея это в виду, если вы посмотрите на вкладку Settings нашего codepen, вы увидите, что я включил один внешний файл JavaScript:

Я также включил Babel для компиляции кода ES6 до ES5.

1. HTML

Наш HTML-код состоит из двух вспомогательных разделов и сообщения. Сообщение содержит два подраздела: данные сообщения и боковую панель сообщения. В реальном сценарии содержание сообщения может соответствовать сообщению в блоге, гостиничному номеру или школьной программе.

Вот разметка:

<section class="section">
  <!-- content here -->
</section>

<article class="post">
  <div class="container">
    <div class="post-content">
      <div class="post-details">
        <!-- content here -->
      </div>
      <aside class="post-sidebar">
        <div class="post-sidebar-inner">
          <!-- content here -->
        </div>
      </aside>
    </div>
  </div>
</article>

<section class="section section-bottom">
  <!-- content here -->
</section>

2. CSS

Мы не будем определять какие-либо специальные стили для нашего примера. Хотя интересно, что мы используем CSS grid для компоновки содержимого сообщения на средних экранах и выше (≤768px).

Вот часть CSS:

.section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #ee3f3f;
  color: white;
  text-align: center;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .post-content {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 70% 30%;
  }
}

CSS Grid Layout: краткое руководство пользователя
То, как мы подходим к макету в интернете, меняется, и на переднем крае этого изменения используется CSS Grid. Это обновленное руководство по быстрому старту, поэтому детали будут пропущены...

Ian Yates
15 марта 2018

CSS Grid Layout

3. JavaScript

HTML и CSS на месте, теперь мы готовы изучить код JavaScript, ответственный за запуск ScrollMagic.

Имейте в виду, что лучший способ понять, как работает этот плагин, - прочитать его документацию. Еще одним полезным источником информации является чит-лист ScrollMagic, созданный Petr Tichy.

Вот наш код JavaScript:

const postDetails = document.querySelector(".post-details");
const postSidebar = document.querySelector(".post-sidebar");
const postSidebarContent = document.querySelector(".post-sidebar > div");

//1
const controller = new ScrollMagic.Controller(); 

//2
const scene = new ScrollMagic.Scene({
  triggerElement: postSidebar,
  triggerHook: 0,
  duration: getDuration
}).addTo(controller);

//3
if (window.matchMedia("(min-width: 768px)").matches) {
  scene.setPin(postSidebar, {pushFollowers: false});
}

//4
window.addEventListener("resize", () => {
  if (window.matchMedia("(min-width: 768px)").matches) {
    scene.setPin(postSidebar, {pushFollowers: false});
  } else {
    scene.removePin(postSidebar, true);
  }
});

function getDuration() {
  return postDetails.offsetHeight - postSidebarContent.offsetHeight;
}

Давайте кратко опишем необходимые действия:

Начнем с создания контроллера.
Затем мы создаем сцену с настраиваемыми опциями и добавляем ее в контроллер.
Если ширина окна не менее 768 пикселей, а сайдбар достигает верхнего края окна просмотра, мы фиксируем его на время, определенное в сцене. В нашем случае желаемая продолжительность рассчитывается путем вычитания высоты поста из высоты содержимого сайдбара.
При изменении размера окна мы проверяем его ширину. Если он уже, чем 768px, боковая панель остается частью нормального потока документов, в противном случае она становится фиксированной.

4. Поддержка браузера

Сам плагин обладает отличной поддержкой браузера. Помимо поддержки плагина, в нашей демонстрации используется CSS Grid, поэтому она будет работать только в браузерах, поддерживающих этот метод.

Заключение

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

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