javascript - how to hide and show a div if it is not hover or clicked after some time

Question

I want to show a sticky navbar onScroll and if I stop scrolling and do not click on it or do not hover on it, the navbar will disappear. I add the sticky functionality of the navbar and it works fine. But I am not able to hide if when I am not scrolling and do not click on it or do not hover on it for five seconds.

question from:https://stackoverflow.com/questions/65650600/how-to-hide-and-show-a-div-if-it-is-not-hover-or-clicked-after-some-time

Answer 1

you can use scroll listener and timers to realize when a user stop scrolling:

let scrolling;
  window.addEventListener('scroll',()=>{
      window.clearTimeout(scrolling); 
//this is to stop the timer when you scroll again
scrolling = window.setTimeout(doSomething(),5000);
//each time you scroll and stop the counter will start
 
    });

const doSomething = ()=>{
.
.
.
};