Меню JavaScript скрывается при прокрутке вниз, появляется при остановке

Question

У меня есть меню, которое является нормальным блоком, отображаемым div, и есть еще один div с аннотацией выше. Я хочу, чтобы меню придерживалось вершины как фиксированное при прокрутке вниз, но сразу же спрятало его. Это происходит из-за того, что когда пользователь перестает прокручиваться, он появляется, и когда пользователь проскальзывает, он снова скрывается, когда останавливается - появляется, когда scrolldown - скрывает и т. Д. ... и всегда появляется, когда нет прокрутки.

Может ли кто-нибудь мне помочь?

Вот код моего меню:

<div class="menu"> 
     <div class="menu_tab"> 
     <div class="wrapper"> 
      <div class="obsah"> 
       <div class="kolonky" id="strana"> 
        <a href="./"><div class="logo"></div></a> 
       </div> 
       <div class="kolonky" id="stred"> 
        <div class="rozbalit"><a href="obchod.php" id="srdce">Obchod</a> 
         <nav> 
          <a href="priprava_navod.php">Jak připravit matcha čaj</a> 
          <a href="jakaje.php">Jak vychutnat matcha čaj</a> 
          <a href="recepty.php">recepty</a> 
         </nav> 
        </div> 
        <div class="rozbalit"><a href="poznejte.php">poznejte matcha</a> 
         <nav> 
       <a href="priprava_navod.php">Jak připravit matcha čaj</a> 
       <a href="jakaje.php">Jak vychutnat matcha čaj</a> 
       <a href="recepty.php">recepty</a> 
       </nav> 
        </div> 
        <div class="rozbalit"><a href="priprava_navod.php">příprava</a> 
         <nav> 
       <a href="priprava_navod.php">Jak připravit matcha čaj</a> 
       <a href="jakaje.php">Jak vychutnat matcha čaj</a> 
       <a href="recepty.php">recepty</a> 
       </nav> 
        </div> 
        <a href="clanek.php">blog</a> 
        <a href="pribeh.php">o nás</a> 
       </div> 
       <div class="kolonky" id="strana"> 
        <div id="uzivatel"> 
         <a href="ucet.php" id="prihlaseni_otevri">Jaroslava B</a> 
         <nav class="uziv_info"> 
          <a href="ucet.php">Moje objednávky</a> 
          <a href="ucet.php">Moje adresy</a> 
          <a href="ucet.php">nákupní košík</a> 
          <a href="#">odhlásit</a> 
          <a href="#">nastavení</a> 
         </nav> 
       </div> 
       <a href="#"><div class="kosik"> 
        <span>15</span> 
       </div></a> 
       <span id="jazyky">CZ</span> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 


.hidden_scr{ 
    display: none !important; 
} 

.menu{ 
    width: 100%; 
    background: transparent; 
    transition-duration: 0.3s; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

.menu.cloned{ 
    background: rgba(255,255,255,0.8); 
    z-index: 5; 
} 

.menu_tab{ 
    width: 60%; 
    margin: 0px auto; 
    padding: 20px 0px; 
    display: table; 
    text-align: center; 
    vertical-align: middle; 
    table-layout: fixed; 
    background: transparent; 
} 

.menu_wr{ 
    display: inline-block; 
    margin-bottom: -5px; 
} 

.menu_wr.grey{ 
    background: #edecf0; 
} 

.menu.grey.cloned{ 
    background: rgba(255,255,255,0.8); 
} 

.menu .obsah{ 
    display: table-row; 
} 

$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','3').removeClass('original').hide(); 

scrollIntervalID = setInterval(stickIt, 10); 


function stickIt() { 

    var orgElementPos = $('.original').offset(); 
    orgElementTop = orgElementPos.top;    

    if ($(window).scrollTop() >= (orgElementTop)) {  
    orgElement = $('.original'); 
    coordsOrgElement = orgElement.offset(); 
    leftOrgElement = coordsOrgElement.left; 
    widthOrgElement = orgElement.css('width'); 
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show(); 
    $('.original').css('visibility','hidden'); 
    } else { 
    $('.cloned').hide(); 
    $('.original').css('visibility','visible'); 
    } 
} 


var lastScrollTop = 0; 
// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element. 
window.addEventListener("scroll", function(){ // or window.addEventListener("scroll".... 
    var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426" 
    if (st > lastScrollTop){ 
     $('.menu.cloned').addClass("hidden_scr"); 
    } else { 
     $('.menu.cloned').removeClass("hidden_scr"); 
    } 
    lastScrollTop = st; 
}, false); 

Answer 1

Готово :)

var didScroll; 
var lastScrollTop = 0; 
var delta = 5; 
var navbarHeight = $('.menu').outerHeight(); 
$(window).scroll(function(event){ 
    didScroll = true; 
}); 
setInterval(function() { 
    if (didScroll) { 
     hasScrolled(); 
     didScroll = false; 
    }else{ 
     $('.menu').removeClass('nav-up').addClass('nav-down'); 
    } 
}, 250); 
function hasScrolled() { 
    var st = $(this).scrollTop(); 
    if(Math.abs(lastScrollTop - st) <= delta) 
     return; 
    if (st > lastScrollTop && st > navbarHeight){ 
     $('.menu').removeClass('nav-down').addClass('nav-up'); 
    } else { 
     if(st + $(window).height() < $(document).height()) { 
      $('.menu').removeClass('nav-down').addClass('nav-up'); 
     } 
    } 

    lastScrollTop = st; 

    if(document.body.scrollTop === 0){ 
     $(".nav-up").css("background", "transparent"); 
     $(".nav-down").css("background", "transparent"); 
    }else{ 
     $(".nav-up").css("background", "rgba(255,255,255,0.9)"); 
     $(".nav-down").css("background", "rgba(255,255,255,0.9)"); 
    } 
}