Для создания эффекта фиксации элементов на странице при прокрутке вверх или вниз, как показано в видео, вы можете использовать CSS свойство `position:sticky`. Этот метод позволяет элементу быть зафиксированным в пределах контейнера при прокрутке страницы до достижения определенного порога.
Пример использования `position: sticky` в CSS:
```css
.sticky-element {
position: -webkit-sticky; /* Для поддержки Safari */
position: sticky;
top: 0; /* Указывает положение элемента относительно верхней части экрана или контейнера */
}
```
И в HTML:
```html
<div class="container">
<div class="content">Начало контента...</div>
<div class="sticky-element">Этот элемент будет фиксированным при прокрутке</div>
<div class="content">Оставшаяся часть контента...</div>
</div>
```
Важно отметить, что для работы `position: sticky` родительский контейнер не должен иметь переполнения с recorte (overflow:hidden или overflow:auto не должны быть установлены).
Помимо чистого CSS, для реализации более сложных сценариев прокрутки вы можете использовать JavaScript библиотеки. Например:
1. **Sticky-js** — простая библиотека для реализации этого поведения.
GitHub: https://github.com/rgalus/sticky-js
2. **Headroom.js** — библиотека, предназначенная для скрытия/отображения элемента при прокрутке.
Веб-сайт: http://wicky.nillia.ms/headroom.js/
3. **ScrollMagic** — мощная библиотека для реализации сложных эффектов прокрутки.
Веб-сайт: http://scrollmagic.io/
Для демонстрации воспользуемся ScrollMagic, так как это библиотека позволяет создавать сложные сценарии и имеет множество примеров и документацию.
Простой пример использования ScrollMagic для фиксации элемента:
```javascript
// Подключить ScrollMagic с помощью npm или тега <script>
const ScrollMagic = require("scrollmagic");
// Создаем контроллер
var controller = new ScrollMagic.Controller();
// Создаем сцену
var scene = new ScrollMagic.Scene({
triggerElement: "#sticky-element", // Элемент, на котором начинается сцена
duration: 300, // Продолжительность анимации (можно указать '100%' для реакции на всю прокрутку)
triggerHook: 0 // Позиция на экране, где сцена срабатывает (0 - сверху, 1 - снизу)
})
.setPin("#sticky-element") // Фиксируем элемент
.addTo(controller); // Добавляем сцену в контроллер
```
Помните, что библиотеки, такие как ScrollMagic, могут потребовать дополнительных зависимостей, например, `gsap` для анимации. Всегда обращайтесь к документации библиотеки, чтобы убедиться в корректной настройке и использовании.
