There is a site on wordpress. I can not do this functionality:

when scrolling the page - a div appears,

after the user stopped scrolling the page - the div immediately hidden.

I tried to do it by adding a class, the class appears when scrolling, but then it does not disappear ... Help, please.

 jQuery(window).scroll(function() { jQuery('.one-page-down').addClass('visible-buttons'); });

    2 answers 2

    You can achieve this behavior with setTimeout .

    See an example.

     var timeoutId = null; function hide() { $('.one-page-down').removeClass('visible-buttons'); timeoutId = null; } $(window).scroll(function() { $('.one-page-down').addClass('visible-buttons'); if (timeoutId) clearTimeout(timeoutId); timeoutId = setTimeout(hide, 500); // будет скрываться через 500 мс }); 
     .one-page-down { position: fixed; top: 0; left: 50px; background-color: red; display: none; } .one-page-down.visible-buttons { display: block; } .content { height: 2000px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="one-page-down">DOWN</div> <div class="content"></div>

    • Thank you very much! - Valery Emelyanov

     $.fn.scrollStopped = function(callback) { var that = this, $this = $(that); $this.scroll(function(ev) { clearTimeout($this.data('scrollTimeout')); $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev)); $("#visiblescroll").css({"opacity":"1"}); }); }; $(window).scrollStopped(function(ev){ $("#visiblescroll").css({"opacity":"0"}); }); 
     #visiblescroll { width: 200px; height: 200px; background: #5fba7d; opacity: 0; position: fixed; top: 5%; left: 5% transition: 0.4s; display: flex; text-align: center; align-items: center; color: white; justify-content: center; text-transform: uppercase; font-size: 21px; } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body style="height:3000px"> <div id="visiblescroll"> hello </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>