Скрипт для плавного появления элемента при скролле

[Quark_]

Есть кнопка звонка в виде:

<div class="call_button">
<img src... />
</div>

Стилями закреплена в положении fixed.

Подскажите плиз скрипт, чтобы сделать так: если разрешение экрана менее, чем 768px, при каждом скролле кнопка исчезает и, через 1-2 секунды, плавно появляется (через opacity).

[Dilettante_Pro]

<style>
.call_button {
   position:fixed;
   opacity:1;
   transition-property:opacity;
   transition-duration: 1s;

}
.scroll {
   opacity:0;
}
</style>

<button class="call_button">Call!</button>
<div style="height:400px;width:300px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias atque, autem consectetur corporis dicta dolor doloremque dolores ducimus ea inventore laboriosam libero nam officia possimus quos tempore tenetur voluptatum!</div>

<script>
var but = document.querySelector('.call_button');

window.onscroll = function() {
      but.classList.add('scroll');
      setTimeout("but.classList.remove('scroll');",1000)
}
</script>

[Quark_]

Добавил, но при скролле один раз исчезает и далее ошибка в консоли

Uncaught ReferenceError: but is not defined
at <anonymous>:1:1
(anonymous) @ VM1837:1
setTimeout (async)
window.onscroll @ default.js:5

на эту строку

but.classList.remove('scroll');

JS 2.1.1