JavaScript菜单在向下滚动时隐藏，在停止时显示

我有一个菜单，它是一个普通的块显示div，因为上面还有一个带注释的div。我希望菜单在向下滚动时固定在顶部，但立即将其隐藏。这是因为当用户停止滚动时，它会出现，当用户向上滚动时，它会再次隐藏，当停止-出现时，当向下滚动-隐藏等。。。并且在没有滚动时始终显示

有人能帮我吗

以下是我的菜单代码：

<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); 

CZ
.隐藏的{
显示：无！重要；
}
.菜单{
宽度：100%；
背景：透明；
过渡时间：0.3s；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
.菜单.克隆{
背景：rgba（255255,0.8）；
z指数：5；
}
.菜单选项卡{
宽度：60%；
保证金：0px自动；
填充：20px 0px；
显示：表格；
文本对齐：居中；
垂直对齐：中间对齐；
表布局：固定；
背景：透明；
}
.菜单{
显示：内联块；
边缘底部：-5px；
}
.menu_wr.GRY{
背景#edecf0；
}
.菜单.灰色.克隆{
背景：rgba（255255,0.8）；
}
.菜单{
显示：表格行；
}
$（'.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）；
功能套件（）{
var orgementpos=$（'.original'）.offset（）；
orgElementTop=orgElementPos.top；
如果（$（窗口）.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'）；
}否则{
$（'.cloned'）.hide（）；
$（'.original'）.css（'visibility'，'visible'）；
}
} 
var lastScrollTop=0；
//元素应替换为已应用滚动的实际目标元素，如果没有目标元素，请使用窗口。
window.addEventListener（“滚动”，function（）{//或window.addEventListener（“滚动”）。。。。
var st=window.pageYOffset | | document.documentElement.scrollTop；//信用：https://github.com/qeremy/so/blob/master/so.dom.js#L426"
如果（st>lastScrollTop）{
$（'.menu.cloned'）.addClass（“hidden_scr”）；
}否则{
$（'.menu.cloned'）.removeClass（“hidden_scr”）；
}
lastScrollTop=st；
}，假）；

完成：）

var；
var lastScrollTop=0；
varδ=5；
var navbarHeight=$（'.menu'）.outerHeight（）；
$（窗口）。滚动（功能（事件）{
didcoll=true；
});
setInterval（函数（）{
如果（滚动）{
哈斯克罗尔（）；
didcoll=false；
}否则{
$（'.menu'）.removeClass（'nav-up'）.addClass（'nav-down'）；
}
}, 250);
函数hasScrolled（）{
var st=$（this.scrollTop（）；
if（Math.abs（lastScrollTop-st）lastScrollTop&&st>navbarHeight）{
$（'.menu'）.removeClass（'nav-down'）.addClass（'nav-up'）；
}否则{
如果（st+$（窗口）.height（）<$（文档）.height（））{
$（'.menu'）.removeClass（'nav-down'）.addClass（'nav-up'）；
}
}
lastScrollTop=st；
if（document.body.scrollTop==0）{
$（“.nav up”）.css（“背景”、“透明”）；
$（“.nav down”）.css（“背景”、“透明”）；
}否则{
$（“.nav up”）.css（“背景”、“rgba（255255,0.9）”）；
美元（“.nav down”）.css（“背景”、“rgba（255255,0.9）”）；
}
}

请不要更改已解决后缀的标题。

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)");
    }
}