<div class="fx">FX</div>
<div class="stripe"></div>

.stripe{
  margin: 0 auto;
  width: 10vw;
  height: 300vh;
  background: linear-gradient(0deg, #f00 0%, #00f 100%);
  transition: opacity 0.1s linear;
  overflow: hidden;
  color: white;
  text-align: center;
}
.fx{
  --lx: 0mm;
  --ly: 0mm;
  position: fixed;
  width: 40mm;
  height: 15mm;
  background: #88a;
  text-align: center;
  transition: all 0.2s;
  transform: translate( var(--lx), var(--ly) );
}
.fx.shad{
  box-shadow: calc(-0.7 * var(--lx)) calc(-0.7 * var(--ly)) 2mm 0mm #000;
}

const stp = document.querySelector('.stripe');
const fx = document.querySelector('.fx');
const hei = stp.getBoundingClientRect().height;
const opacResume = debounce( () => {
  stp.style.opacity = 1;
  stp.innerHTML = '';
  fx.style.setProperty('--lx', '0mm');
  fx.style.setProperty('--ly', '0mm');
  fx.classList.remove('shad');
}, 500 );

let last = 0;
window.addEventListener('scroll', function () {
  const dif = window.scrollY - last;
  last = window.scrollY;
  const arr = dif < 0 ? '▲' : dif > 0 ? '▼' : '—';
  stp.innerHTML = ''.padStart( 2000, arr + '<br>' );
  stp.style.opacity = 1 - last/hei;
  fx.style.setProperty('--lx', '2mm');
  fx.style.setProperty('--ly', dif < 0 ? '-2mm' : dif > 0 ? '2mm' : '0mm' );
  fx.classList.add('shad');
  opacResume();
}, false);