Скрипт для плавного появления элемента при скролле
Есть кнопка звонка в виде:
<div class="call_button"> <img src... /> </div> Стилями закреплена в положении fixed. Подскажите плиз скрипт, чтобы сделать так: если разрешение экрана менее, чем 768px, при каждом скролле кнопка исчезает и, через 1-2 секунды, плавно появляется (через opacity). |
<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>
|
Добавил, но при скролле один раз исчезает и далее ошибка в консоли
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 |
| Часовой пояс GMT +3, время: 17:20. |