Vue笔记 Header 吸顶

 <Header  class="box_fixed" id="boxFixed" :class="{'is_fixed' : isFixed}" />

<script>
export default {
  name: "Layout",
  data(){
    return {
      isFixed: false,
      offsetTop:0
    }
  },
  mounted(){
    window.addEventListener('scroll',this.initHeight);
    this.$nextTick( () => {
      this.offsetTop = document.querySelector('#boxFixed').offsetTop;
    })
  },
  methods:{
    initHeight () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.isFixed = scrollTop > this.offsetTop;
    },
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
}

<style>
.box_fixed{
}
.is_fixed{
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  z-index: 999;
}
</style>