專案需要實現按鈕懸浮的功能, 實現後的記錄

瑪拉-以琳發表於2023-01-31

實現可視區域底部懸浮編輯提交等功能的懸浮框:
image.png
並當滾動到某處時, 固定在該處

<template>
  <div>
    <slot></slot>
    <div
      v-show="show"
      style="height: 80px"
    ></div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data () {
    return {
      show: true, // 控制佔位置的顯示隱藏, 防止抖動
      scoll: null
    }
  },
  mounted () {
    // 插槽傳入的元件類名
    const btnDiv = $('.btn_div')
    btnDiv.css({
      'display': 'flex',
      'justify-content': 'center',
      'align-items': 'center',
      'height': '80px',
      'width': '100%',
      'position': 'fixed',
      'z-index': '10000',
      'bottom': '0',
      'left': '50%',
      'transform': 'translateX(-50%)',
      'background-color': '#fff',
      'text-align': 'center',
      'box-shadow': '0 6px 12px rgba(0, 0, 0, 0.9)',
    })

    // 獲取可視區域高度
    let clientH = $(window).height()

    this.scoll = () => {
    // '.footer-div'為頁面中需要固定的位置
    // $('.footer-div').offset().top - $(document).scrollTop() 
    // 滾動的距離與目標位置的差的絕對值小於等於可視區域高度時為懸浮否則固定
      if ((clientH <= ($('.footer-div').offset().top - $(document).scrollTop()))) {
        this.show = true
        btnDiv.css({
          'display': 'flex',
          'justify-content': 'center',
          'align-items': 'center',
          'height': '80px',
          'width': '100%',
          'position': 'fixed',
          'z-index': '10000',
          'bottom': '0',
          'left': '50%',
          'transform': 'translateX(-50%)',
          'background-color': '#fff',
          'text-align': 'center',
          'box-shadow': '0 6px 12px rgba(0, 0, 0, 0.9)',
        })
      } else {
        this.show = false
        btnDiv.css({
          'position': 'static', 'transform': 'translateX(0%)',
          'box-shadow': '0 0 0 rgba(0, 0, 0, 0.9)',
          'background-color': '#fafafa',
        })
      }
    }
    window.addEventListener('scroll', this.scoll)
  },
  beforeDestroy () {
    // 清除該事件
    window.removeEventListener('scroll', this.scoll)
  },
}
</script>

<style lang="scss" scoped>
// .btn_div {
//   display: flex;
//   width: 100%;
//   justify-content: center;
//   align-items: center;
//   height: 80px;
//   position: fixed;
//   bottom: 0;
//   z-index: 10000;
//   left: 50%;
//   transform: translateX(-50%);
//   // margin: 28px auto;
//   background-color: #fff;
//   text-align: center;
//   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.9);
// }
</style>

相關文章