javascript Issue329：20171130 - no58。予约ボタンと电话ボタンの追従

Posted 2021-05-04

import { addClass, removeClass } from '../utils/DOM'

// スクロール位置
const getScrollPosition = () => {
  const posY = document.documentElement.scrollTop || document.body.scrollTop
  return posY
}

// ページ内のelmのY座標
const getTargetPositionY = (elm) => {
  const rect = elm.getBoundingClientRect()
  return rect.top + pageYOffset
}

export default function reserveBtnSticky() {
  const reserveBtnDOM = document.getElementById('js-reserve-btn')

  if (reserveBtnDOM) {
    const reserveBtnDOMHeight = reserveBtnDOM.getBoundingClientRect().height
    const prDOM = document.getElementById('js-shop-pr')
    const prDOMposY = getTargetPositionY(prDOM)

    let prDOMPassFlag

    // 追従ボタンがフッターに被らないためのページ最下部余白
    document.body.style.paddingBottom = `${reserveBtnDOMHeight}px`

    addEventListener('scroll', () => {
      if (getScrollPosition() >= prDOMposY) {
        prDOMPassFlag = true
      }

      if (prDOMPassFlag && (getScrollPosition() > prDOMposY)) {
        removeClass(reserveBtnDOM, 'js-reserve-btn-fadeout')
        addClass(reserveBtnDOM, 'js-reserve-btn-fadein')
      } else if (prDOMPassFlag) {
        removeClass(reserveBtnDOM, 'js-reserve-btn-fadein')
        addClass(reserveBtnDOM, 'js-reserve-btn-fadeout')
      }
    })
  }
}