游戏陪玩接单平台源码，如何实现按钮悬浮功能

游戏陪玩接单平台源码，如何实现按钮悬浮功能

实现可视区域底部悬浮编辑提交等功能的悬浮框：

 

并当滚动到某处时, 固定在该处

<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>

以上就是游戏陪玩接单平台源码，如何实现按钮悬浮功能， 更多内容欢迎关注之后的文章