ウィンドウのスクロールにJavascriptのaddEventListenerを追加する方法

Question

アイコンを表示すると、表示/非表示になっています。今、私は、ユーザーが下をスクロールダウンメニューを非表示にすると、ホバー機能の表示/非表示が再び行われます。

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

私はこのような何かを追加しよう：以下は私の作業コードである

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

..しかし、それは動作しませんでした。 「ウィンドウ」がスクロールダウンしたときに非表示にしたいと指定しなければならないので、私はそれを推測しますか？

ご協力いただければ幸いです。

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

これは、あなたが `window.addEventListener（ 'スクロールのように、window``に `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>