【Vue】ある区間だけボタンを下部に固定表示する

Vue2を実装していて、ある区間だけボタンを下部に固定したいという要件を実装した時のメモ

区間の開始要素（id="start"）が見切れたらボタンが固定表示され、終了要素（id="end"）が見え始めたら非表示になるようにする

要素のブラウザ左上からの相対位置はgetBoundingClientRectを使って求める

developer.mozilla.org

開始要素のbottomが0以下、かつ、終了要素のtopがブラウザの高さ以上の間は表示するようにした

  created () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const start = document.getElementById('start')
      const end = document.getElementById('end')
      if (start && end) {
        this.showFloatingButton =
          start.getBoundingClientRect().bottom <= 0 
              && end.getBoundingClientRect().top >= window.innerHeight
      }
    },
  },