При прокрутке колесика вниз - кнопка подымается вверх экрана. Это обычное поведение всех элементов. Но наша задача сделать так, что бы кнопка задержалась вверху экрана и не ушла выше. Задержалась и замерла в своей секции. Как только секция закончиться, то кнопка скрывается вверху экрана и уступает место следующей секции.
Верстаем простенький шаблон. Хэдеру и Футеру делаем фон серенький и задаем высоту около 100 пикселей. А в контенте будут секции, которые разбиваем на три одинаковые колонки.
В первой колонке будет только кнопка, с которой будем работать. А в двух остальных - произвольный текст. И продублируем эту секцию четыре раза. Для массовости.
Все шаблон готов.
Далее нам нужно отслеживать viewport - видимый контент. Когда блок, в которой находится кнопка, прибывает в зоне видимости, то кнопку необходимо фиксировать в верхней части, когда она ее достигнет. Такое можно добиться свойством css sticky. Остается только добавлять и удалять его к нашей кнопке в нужный момент.
Стакой задачей хорошо справиться Intersection Observer API (перевод с англ. Intersection - перекресток, а Observer - наблюдатель) в JavaScript. Внимательно прочитав документацию, изучив все опции метода, можно приступать к написанию кода.
Для начала присваиваем определенный класс нашим блокам в которых находиться кнопка. Именно блоки мы будет отслеживать. А класс присваивать кнопкам в нужный момент.
Сначала выбираем все элементы за которыми собираемся следить.
const btnElements = document.querySelectorAll('.btn-element')
Далее создаем константу observer, которая будет экземпляром объекта IntersectionObserver. В callback-функции перебираем все вхождения и присваеваем нашей кнопке нужный класс. Наша кнопка находиться внутри секции. Что бы правильно написать путь можно распечатать в консоле аргумент entry. И написать так: entry.target.children[0]
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
entry.target.children[0].classList.toggle('sticky', entry.isIntersecting)
if(entry.isIntersecting) observer.unobserve(entry.target)
})
})
И в конце обращаемся к опции вновь созданного экземпляра. Предварительно обернув его в цикл forEach.
btnElements.forEach(btnEl => {
observer.observe(btnEl)
})
Всё наш код готов. Проверяем и радуемся.
Комментарии
Отправить комментарий