vue-cli4项目中的吸顶效果

1.html

<!-- 原理：根据屏幕滚动的距离，动态控制class的值，控制元素的位置。 -->
<div id="showDays" :class="headerFixed?'issFixed':''">
    <van-tabs v-model="active">
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
    </van-tabs>
</div>

2. javascript

 data() {
    return {
      headerFixed:0, //是否吸顶 条件
      offsetTop:0  //元素的offsetTop
    }
  },
mounted() { 
    // 监听dom渲染完成
		this.$nextTick(function(){
		// 这里fixedHeaderRoot是吸顶元素的ID
		let header = document.getElementById("showDays");
		// 这里要得到top的距离和元素自身的高度
		this.offsetTop = header.offsetTop;
		console.log("offsetTop:" + this.offsetTop);
		});
	// handleScroll为页面滚动的监听回调
		window.addEventListener('scroll', this.handleScroll);
  },
 destroyed(){
		window.removeEventListener('scroll', this.handleScroll);
	},
	
methods: {
    handleScroll(){
		// 得到页面滚动的距离
		let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;						
    // 判断页面滚动的距离是否大于吸顶元素的位置       console.log("divoffsetTOP"+document.getElementById("showDays").offsetTop);

      //如果滚动距离 大于元素的offsetTop 就返回1，吸顶
      //如果滚动距离 小于元素的offsetTop 就返回0，不吸顶
     this.headerFixed=scrollTop>this.offsetTop?1:0
		},

3. css

.issFixed{
	position: fixed;
	top:0px;
	left:0px;
	right:0px;
	z-index: 4;
}