К основному контенту

Сообщения

Сообщения за март, 2023

Фиксируем кнопку при прокрутке. Используем Intersection Observer JavaScript API

При прокрутке колесика вниз - кнопка подымается вверх экрана. Это обычное поведение всех элементов.  Но наша задача сделать так, что бы кнопка задержалась вверху экрана и не ушла выше. Задержалась и замерла в своей секции. Как только секция закончиться, то кнопка скрывается вверху экрана и уступает место следующей секции.  Верстаем простенький шаблон. Хэдеру и Футеру делаем фон серенький и задаем высоту около 100 пикселей. А в контенте будут секции, которые разбиваем на три одинаковые колонки.  В первой колонке будет только кнопка,  с которой будем работать. А в двух остальных - произвольный текст. И продублируем эту секцию четыре раза. Для массовости.  Все шаблон готов.  Далее нам нужно отслеживать viewport - видимый контент. Когда блок, в которой находится кнопка, прибывает в зоне видимости, то кнопку необходимо фиксировать в верхней части, когда она ее достигнет. Такое можно добиться свойством css sticky. Остается только добавлять и удалять его к нашей кнопке в нужный момент.  Стак