技術標籤：vue

html部分

<div class="btnBox">
  <span class="topTitle">階段詳情</span>
  <span>
    <el-button size="small" type="primary">一鍵摺疊</el-button>
    <el-button size="small" type="primary">新增關注</el-button
 
>
    <el-button size="small" type="primary">複製連結</el-button>
    <el-button size="small" type="primary" @click="saveForm">儲存</el-button>
    <el-button size="small" type="primary">取消</el-button>
 

  </span>
</div>

css部分

.btnBox {
  margin: 12px 0;
  text-align: right;
  position: relative;
  &.btnBox-active {
    position: fixed;
    top: 0;
    width: 84%;
    z-index: 1000;
    background: #FFFFFF;
  }
  .topTitle {
    font-weight: 600;
    color: #333333;
    position: absolute;
    left
 
: 0;
    top: 5px;
  }
}

javascript部分

mounted() {
  window.addEventListener("scroll", function(e) {
	let total = $('body, html').scrollTop();
	if (total > 0) {
	  $('.btnBox').addClass('btnBox-active');
	}
	else {
	  $('.btnBox').removeClass('btnBox-active');
	}
  })
}