0

我有一个固定的页脚，它在触发滚动事件时展开，并在最后一次滚动或移动 1500 毫秒后缩小。

下面是生产脚本的简化版本，我在其中使用 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>

我刚开始使用交叉点观察器，我想知道如何实现相同的行为，因为它是一个固定元素，没有交叉点，我能想到的唯一方法是创建一个“哨兵”元素并更改其位置每个路口，这似乎是一种矫枉过正，违背了包括路口观察者“性能”的主要目的

所以没有明确的想法，我转向你们和你们的专业知识。

4

0 回答 0