滚动的淡化元素与香草JS

Question

我正在通过添加css类来创建根据滚动方向淡入/淡出的元素。

但我遇到麻烦，滚动事件不会被解雇，我不知道为什么。

另外，我想避免使用较大的高度元素。

我该怎么做？

JS：

var el = document.getElementById('el');

el.addEventListener('scroll', function(){
  //if scroll down -> fade out.
  //if scroll up -> fade in.
});

的CSS：

#el {
    width: 500px;
    height: 500px;
    display: block;
    margin: 0 auto;
    background-color: #00838f;
}

.container {
    width: 100%;
    height: 1200px;
}

.fade-out {
    -webkit-animation: fadeOut .5s ease-in 1 forwards;
    animation: fadeOut .5s ease-in  1 forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    to {
        opacity: 0;
    }
}

HTML：

<div class='container'>
   <div id="el"></div>
</div>