Делаем кнопки активными при прокрутке страницы

Главная

Вернуться к статьям

Делаем кнопки активными при прокрутке страницы

Создайте плагин "Свой код" и в поле "Код перед " добавьте скрипт:

<script type="text/javascript">
cr.api(page => {
page.waitForAppear('a.btn', button => {
const href = button.getAttribute('href')
if (!href || !href.startsWith('#')) return
const id = href.substr(1)
const target = document.getElementById(id)
if (!target) return
const fixed = document.querySelector('.fixation-top')
let fixedHeight = fixed ? fixed.offsetHeight : 0
setActive()
window.addEventListener('scroll', () => setActive())
function setActive() {
const rectTop = target.getBoundingClientRect().top
console.log(rectTop)
const rectBottom = rectTop + target.offsetHeight
const isOver = rectTop < fixedHeight && rectBottom < fixedHeight
const isUnder = rectTop > fixedHeight
if (isOver || isUnder) return button.classList.remove('active')
button.classList.add('active')
}
})
})
</script>