0

I have a fixed footer that expands when the scroll event is triggered and shrink after 1500ms of the last scroll or move.

Below is a simplified version of the production script where I'm using lodash throttle and remove event listener when destroying the components.

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>

I just started using the intersection observer and I'm wondering how I can achieve the same behavior, since it's a fixed element there is no intersection, the only way I can think of, is creating a "sentinel" element and change its position on every intersection, which seems to be an overkill and defy the main purpose of including the intersection observer "Performance"

So with no clear idea, I'm turning to you guys and your expertise.

  • 1
    Sounds to me like the scroll event is the right solution in this case, since you want the change to happen as a result of the scrolling action, *not* as a result of a particular element scrolling into view. – David784 Feb 20 '19 at 12:08
  • That's what I told myself, but since I'm not very familiar with "intersection observer", I thought may be I'm messing something. –  Feb 20 '19 at 12:16
  • From your description and your example, it makes no sense to do this using an intersection observer, you clearly stated that it depends on the scroll. Why do you want to use an intersection observer? the code will even be more complicated. There's no benefit on doing so. – arieljuod Jul 15 '19 at 14:18

0 Answers0