用position:fixed做粘性定位

项目场景：

一开始给容器元素添加 overflow: visiable，再给子元素（高度不定）添加 position: sticky，实现了粘性定位。但是后来给页面加了 iframe 后，发现页面里的元素不能自动换行，表格有多宽就显示多宽，页面出现了横向滚动条。改用 fixed 定位。

解决方案：

添加一个占位元素，通过 js 计算定位元素的高度，把高度给占位元素。

---

代码：

<div>
  <div class="lives-padding"></div>
  <div class="lives"></div>
<div>

.lives {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

1. 通过 js 计算定位元素高度：

methods: {
  calcHeight() {
    const lives = document.getElementsByClassName('lives')[0]
    const livesPadding = document.getElementsByClassName('lives-padding')[0]
    livesPadding.style.height = lives.offsetHeight + 'px'
  }
}

2. 在 mounted 时调用：

mounted() {
  this.calcHeight()
  this.debounceCalcHeight = debounce(this.calcHeight, 500)
  window.addEventListener('resize', this.debounceCalcHeight)
}

做了一个缩放窗口时重新计算高度的方式，防止高度改变后下面的元素被遮住，显示不全。用了 lodash 的 debounce 方法做了防抖。

3. 组件销毁时解绑

beforeDestory() {
  window.removeEventListener('resize', this.debounceCalcHeight)
}