主页 / 问题 / 1032053
Accepted
Andrew Gor
Asked:2020-10-07 20:08:50 +0000 UTC2020-10-07 20:08:50 +0000 UTC

使用 JS 滚动后禁用元素

  • 772

网站上有一个菜单 ( <input type="checkbox" id="hmt" class="hidden-menu-ticker">)，最初它是隐藏的。用户可以通过按下按钮打开/关闭菜单。假设用户打开了菜单，我需要：

  1. 如果用户向任一方向滚动页面 100 像素，则应关闭菜单。
  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>

提前感谢您的帮助。

javascript

1 个回答

  1. Best Answer

    这是我将如何做的一个例子：

    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>

    • 1

相关问题