Day13: Slide in on Scroll

//在一定時間20秒內只能觸發一次。
function debounce(func, wait = 20, immediate = true) {
  var timeout
  return function () {
    var context = this,
      args = arguments
    var later = function () {
      timeout = null
      if (!immediate) func.apply(context, args)
    }
    var callNow = immediate && !timeout
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
    if (callNow) func.apply(context, args)
  }
}

//頁面滾到指定高度時，讓圖片滑入、滑出文章

function checkSlide() {
  sliderImages.forEach((sliderImage) => {
    //頁面已滾動距離 + 螢幕高度 - 圖片一半的高度 = 圖片滑入文章的高度
    const slideInAt = window.scrollY + window.innerHeight - sliderImage.height / 2

    //圖片至螢幕頂端的距離 + 圖片的高度 = 圖片底部至螢幕頂端的距離
    const imageBottom = sliderImage.offsetTop + sliderImage.height

    //判斷是否已達圖片應滑入高度，即圖片滑入文章的高度 > 圖片至螢幕頂端的距離
    const isHalfShown = slideInAt > sliderImage.offsetTop

    //判斷是否未達圖片應滑出高度，即頁面已滾動距離 < 圖片底部至螢幕頂端的距離
    const isNotScrolledPast = window.scrollY < imageBottom

    //如果已達圖片應滑入高度，且未達圖片應滑出高度，就加上 `active` 樣式
    if (isHalfShown && isNotScrolledPast) {
      sliderImage.classList.add('active')
    } else {
      sliderImage.classList.remove('active')
    }
  })
}

const sliderImages = document.querySelectorAll('.slide-in')

window.addEventListener('scroll', debounce(checkSlide))