Есть меню на сайте (<input type="checkbox" id="hmt" class="hidden-menu-ticker">
) и изначально оно скрыто. Пользователь может открывать/заркывать меню нажатием кнопки. Допустим, пользователь открыл меню, мне необходимо:
- Если пользователь прокрутил страницу на 100px в любую сторону, надо закрыть меню.
- Если пользователь щёлкнул в любом месте страницы за пределами блока меню - закрыть меню.
Как показывать меню после прокрутки я разобрался. Но как его скрывать после прокрутки определённого количества пикселей пока не могу понять. Как я понимаю, мне надо хранить в переменной сколько прокручено пикселей. Далее мне надо обнулять эту переменную если пользователь не скролит мышкой допустим 5 секунд. Как тогда понять что пользователь на данный момент не скролит?
<script>
window.addEventListener('scroll', function () {
var pixelCount = window.pageYOffset;
if (pixelCount < 300) {document.getElementById("hmt").checked = false;}
if (pixelCount > 300) {document.getElementById("hmt").checked = true;}
})
</script>
Заранее благодарен за любую помощь.