const boxes = document.querySelectorAll('.box')
window.addEventListener('scroll', checkBoxes)
checkBoxes()
function checkBoxes() {
const triggerBottom = window.innerHeight / 5 * 4
boxes.forEach(box => {
const boxTop = box.getBoundingClientRect().top
if(boxTop < triggerBottom) {
box.classList.add('show')
} else {
box.classList.remove('show')
}
})
}
You must check jQuery API to understand what's going on here:
const boxes = $('.box')
$(document).on('scroll', checkBoxes)
checkBoxes()
function checkBoxes() {
const triggerBottom = window.innerHeight / 5 * 4
boxes.each(() => {
const boxTop = box.getBoundingClientRect().top
if(boxTop < triggerBottom) {
$(this).addClass('show')
} else {
$(this).removeClass('show')
}
})
References:
$ - selecting elements
on() - adding events
each() - each element
addClass() - add class
removeClass() - remove class