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

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

Верстаем простенький шаблон. Хэдеру и Футеру делаем фон серенький и задаем высоту около 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)

})

Всё наш код готов. Проверяем и радуемся.