Сегодня мы бы хотели показать, как можно стилизовать прокрутку и блоки на странице. По сути мы сделаем связку между этими элементами, сделаем привязку блоков к прокрутке, чтобы они были взаимосвязаны. Мы будем использовать плагин Scroll Balanced-это крошечный плагин jQuery для сбалансированного прокрутки контента, который замедляет скорость прокрутки вашего небольшого столбца с информацией на сайте (обычно боковая панель с динамической высотой), чтобы адаптировать скорость прокрутки длинного столбца.

 

Возможно кто-то не понял идею, по этому просмотрите демонстрацию, и вы сразу поймете на сколько это превосходно. Давайте же скорее приступим к созданию. Также можете воспользоваться готовыми решениями от наших партнеров:

Шаг 1. HTML

Нам необходимо подключить две очень важные библиотеки, это scroll-balanced.css и scroll-balanced.js именно они отвечают за работу прокрутки.

Также подключите jQuery к странице, смотрите, чтобы у вас не было несколько раз подключено одного и того же скрипта.

Теперь нам необходимо создать наполнение для содержания, обратите внимание, так как у нас плагин, то вся работа возложена именно на него.

Благодаря данному плагину прокрутка по указанному классу будет производиться плавно, а боковая панель будет ожидать основное содержание, чтобы завершить анимацию одновременно.

Вот и все. Готово!