<div :style="{ paddingBottom: paddingBottom}">

 <header>資源信息</header>

 <div>
  <!-- 公司信息 瀏覽量 -->
 </div>

 <div id="fixedBar" :class="{ fixedBar: isFixed }">
  <!-- 品名 -->
  <!-- 規(guī)格 -->
  <!-- 產地 -->
  <!-- 單價 -->
 </div>

 <div :style="{ marginTop: marginTop }">
  <!-- 數據列表 -->
 </div>

 <footer class="footer">
  <button>訂閱</button>
  <button>關閉</button>
  <div v-show="advertShow">
   <a @click="del">×</a>
   <img src="./廣告.jpg" />
  </div>
 </footer>

</div>

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

data () {
 paddingBottom: '1.5rem', // 給最外層div一個padding-bottom
 // 因為footer是fixed定位 如果padding-bottom為0 數據列表拉到最下面的時候 會有部分數據被footer擋住

 isFixed: false, // bar浮動
 offsetTop: 0, // 觸發(fā)bar浮動的閾值
 marginTop: 0, // 觸發(fā)bar浮動的同時 給數據列表一個margin-top 防止列表突然上移 會很突兀

 advertShow: true, // 廣告顯示
}

mounted () {
 // 設置初始的 padding-bottom 值為 footer 的高度 +20 防止數據列表拉到最下面被footer擋住 +多少自定
 this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';

 // 設置bar浮動閾值為 #fixedBar 至頁面頂部的距離
 this.offsetTop = document.querySelector('#fixedBar').offsetTop;

 // 開啟滾動監(jiān)聽
 window.addEventListener('scroll', this.handleScroll);
}

methods: {
 // 關閉廣告
 del () {
  this.advertShow = true;
  this.$nextTick(() => {
   this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';
  });
 },

 // 滾動監(jiān)聽 滾動觸發(fā)的效果寫在這里
 handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollTop >= this.offsetTop) {
   this.isFixed = true;
   this.marginTop = document.querySelector('#fixedBar').offsetHeight + 'px';
  } else {
   this.isFixed = false;
   this.marginTop = 0;
  }
 }
}

destroyed () {
 window.removeEventListener('scroll', this.handleScroll); // 離開頁面 關閉監(jiān)聽 不然會報錯
}