使用vue實現吸頂效果

使用到的知識點

// 獲取吸頂元素的dom
let header = this.$refs.header;
// 吸頂元素到top的距離
this.offsetTop = header.offsetTop;
// 元素自身的高度
this.offsetHeight = header.offsetHeight;

// 監聽滾動條
window.addEventListener("scroll", this.handleScroll);

// 得到頁面滾動的距離，兼容寫法
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;

// 判斷頁面滾動的距離是否大於吸頂元素的位置
this.headerFixed = scrollTop > this.offsetTop - this.offsetHeight;

具體實現

<template>
  <div class="home">
    <div ref="header" class="header-bg" :class="headerFixed?'issFixed':''">Header</div>
    <div style="height: 500px">111</div>
    <div style="height: 300px">222</div>
    <div>333</div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      offsetTop: 0,
      offsetHeight: 0,
      headerFixed: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 獲取吸頂元素的dom
      let header = this.$refs.header;
      // 吸頂元素到top的距離
      this.offsetTop = header.offsetTop;
      // 元素自身的高度
      this.offsetHeight = header.offsetHeight;

      // 監聽滾動條
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 得到頁面滾動的距離，兼容寫法
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 判斷頁面滾動的距離是否大於吸頂元素的位置
      this.headerFixed = scrollTop > this.offsetTop - this.offsetHeight;
    }
  }
};
</script>

<style>
.issFixed {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 4;
}
.header-bg {
  font-size: 30px;
  background-color: red;
}
</style>