如何在 window 滚动条上添加 Javascript addEventListener

Question

所以，当我将鼠标悬停在图标 shows/hide 上时，我有一个导航，效果很好！现在，我想在用户向下滚动时隐藏菜单，然后 show/hide 悬停功能再次发生。以下是我的工作代码：

byClass('nav-toggle')[0].addEventListener('mouseover', showNav);
byClass('nav-wrap')[0].addEventListener('mouseleave', hideNav);

我尝试添加如下内容：

  byClass('nav-wrap')[0].addEventListener('scroll', hideNav);

.. 但它没有用。我猜是因为我必须指定我想在 "window" 向下滚动时隐藏？

如有任何帮助，我们将不胜感激。

Answer 1

您必须监听 scroll 启动和隐藏导航。而且您还必须知道用户何时停止滚动。没有单独的事件，因此如果滚动完成，我们可以使用 timeout 在 150 毫秒内显示您的导航。

var timer = null;
window.addEventListener('scroll', function() {
    if(timer !== null) {
        clearTimeout(timer);        
    } else {
        hideNav();
        timer = setTimeout(function() {
          showNav();
        }, 150);
    }
}, false);

Answer 2

这是在滚动时隐藏菜单的示例

var content = document.getElementById('two');

content.addEventListener('scroll', hideMenu);


function hideMenu()
{
    var menu = document.getElementById('one');
    menu.style.display = 'none';
}

section {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 10px;
}
div#one {
    width: 15%;
    height: 200px;
    background: red;
    float: left;
}
div#two {
    height: 200px;
    background: black;
    color: white;
    overflow-y: scroll;
}

<section>
    <div id="one"></div>
    <div id="two"> SCROLL TO HIDE MENU<br> shows/hide, which is working great! Now, I want to hide the menu when the user scrolls down the widown, then the show/hide on hover functionality takes place again. Below is my working code:

byClass('nav-toggle')[0].addEventListener('mouseover', showNav);
byClass('nav-wrap')[0].addEventListener('mouseleave', hideNav);
I try to add something like this:

  byClass('nav-wrap')[0].addEventListener('scroll', hideNav);
.. but it didn't work. I guess its because I have to specify that I want to hide when the "window" is scrolled down?

Any help would be very appreciated.So, I have a nav that when I hover the icon, shows/hide, which is working great! Now, I want to hide the menu when the user scrolls down the widown, then the show/hide on hover functionality takes place again. Below is my working code:

byClass('nav-toggle')[0].addEventListener('mouseover', showNav);
byClass('nav-wrap')[0].addEventListener('mouseleave', hideNav);
I try to add something like this:

  byClass('nav-wrap')[0].addEventListener('scroll', hideNav);
.. but it didn't work. I guess its because I have to specify that I want to hide when the "window" is scrolled down?

Any help would be very appreciated.So, I have a nav that when I hover the icon, shows/hide, which is working great! Now, I want to hide the menu when the user scrolls down the widown, then the show/hide on hover functionality takes place again. Below is my working code:

byClass('nav-toggle')[0].addEventListener('mouseover', showNav);
byClass('nav-wrap')[0].addEventListener('mouseleave', hideNav);
I try to add something like this:

  byClass('nav-wrap')[0].addEventListener('scroll', hideNav);
.. but it didn't work. I guess its because I have to specify that I want to hide when the "window" is scrolled down?

Any help would be very appreciated.So, I have a nav that when I hover the icon, shows/hide, which is working great! Now, I want to hide the menu when the user scrolls down the widown, then the show/hide on hover functionality takes place again. Below is my working code:

byClass('nav-toggle')[0].addEventListener('mouseover', showNav);
byClass('nav-wrap')[0].addEventListener('mouseleave', hideNav);
I try to add something like this:

  byClass('nav-wrap')[0].addEventListener('scroll', hideNav);
.. but it didn't work. I guess its because I have to specify that I want to hide when the "window" is scrolled down?

Any help would be very appreciated.</div>
</section>

如何在 window 滚动条上添加 Javascript addEventListener

How to add Javascript addEventListener on window scroll

javascript

velocity