CODEWITHSUNDEEP
javascriptvelocity
Marcio
Marcio

Reputation: 317

How to add Javascript addEventListener on window scroll

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.

Upvotes: 1

Views: 8686

Answers (2)

mrid
mrid

Reputation: 5794

This is a sample to hide menu on scroll

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>

Upvotes: 1

Max Koretskyi
Max Koretskyi

Reputation: 105517

You have to listen for scroll start and hide the nav. And you also have to know when user stops scrolling. There is no separate event for that, so we can use timeout to show your nav in 150 ms if the scroll has finished. 

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

Upvotes: 3

Related Questions