固定元素上的Javascript相交观察器

Question

我有一个固定的页脚，当触发滚动事件时该页脚会扩展，在上一次滚动或移动1500ms之后会缩小。

下面是生产脚本的简化版本，其中，我使用lodash节流阀并在销毁组件时删除了事件侦听器。

var
  el = document.getElementsByTagName('div')[0],
  timer
;

function rest(){

  clearTimeout(timer);

  timer = setTimeout(() => {
    el.classList.add("rest");
  }, 1500);

  el.classList.remove("rest");

}

window.addEventListener('scroll', rest);

i {
  display:block;
  height: 100px;
  background: gray;
  margin: 50px 20px;
  list-style:none;
}

div {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: blue;
  transition: all 0.6s;
}

.rest {
  height: 20px;
  background: red;
}

<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<div class="rest"></div>

我刚刚开始使用交集观察器，我想知道如何实现相同的行为，因为它是固定元素，所以没有交集，我想到的唯一方法是创建“前哨”元素并进行更改它在每个路口的位置，这似乎是过大的行为，并且违反了包括路口观察员“ Performance”的主要目的

因此，我不清楚，我正在求助于您和您的专业知识。