Отключение элемента после прокрутки с помощью JS

99
30 августа 2021, 16:30

Есть меню на сайте (<input type="checkbox" id="hmt" class="hidden-menu-ticker">) и изначально оно скрыто. Пользователь может открывать/заркывать меню нажатием кнопки. Допустим, пользователь открыл меню, мне необходимо:

  1. Если пользователь прокрутил страницу на 100px в любую сторону, надо закрыть меню.
  2. Если пользователь щёлкнул в любом месте страницы за пределами блока меню - закрыть меню.

Как показывать меню после прокрутки я разобрался. Но как его скрывать после прокрутки определённого количества пикселей пока не могу понять. Как я понимаю, мне надо хранить в переменной сколько прокручено пикселей. Далее мне надо обнулять эту переменную если пользователь не скролит мышкой допустим 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>

Заранее благодарен за любую помощь.

Answer 1

Вот собрал Вам пример, как бы я это сделал:

let opened; 
 
function openMenu() { 
  opened = window.scrollY 
  nav.classList.add('visible') 
} 
 
addEventListener('scroll', e => { 
  if (Math.abs(opened - pageYOffset ) > 300) 
    nav.classList.remove('visible')     
}) 
 
addEventListener('click', e => { 
  if (e.target.id !== 'nav' && e.target.id !== 'btn') 
    nav.classList.remove('visible') 
})
body { 
margin:0; 
} 
section { 
  height:1000px; 
} 
button, nav { 
  position: fixed; 
  top: 0; 
} 
nav { 
  background: wheat; 
  opacity: 0; 
  height: 100px; 
  width: 100vw; 
  pointer-events: none; 
  transition: 0.3s; 
  line-height:100px; 
  font-size:40px; 
  text-align:center 
} 
 
.visible{ 
  opacity:1; 
  pointer-events: all; 
}
<button id=btn onclick=openMenu() >open menu</button> 
<nav id=nav>scroll 300 px away to hide menu</nav> 
<section></section>

READ ALSO
Как правильно написать селектор?
CSS

Как правильно написать селектор?

 108
Как вернуться в начало цикла?
c++

Как вернуться в начало цикла?

у меня есть код, меня интересует именно вот этот кусок:

 114
Сигнал SIGFPE вместо NaN
c++

Сигнал SIGFPE вместо NaN

 98
Помогите ускорить код
c++

Помогите ускорить код

есть кодон принимает число и раскладывает на множители

 160