スクロール中にメニューを非表示にする

Question

メニュー（div）があり、修正されました。私はコードを必要とするので、スクロール中に消えてしまい、停止中に表示されます。私はいくつかのコードを持っていますが、スクロールを止めるとすぐに表示されます...ユーザーがもっとスクロールしたくない場合は、しばらく待ってください...それぞれの後に表示されないようにするインチ私はスクロールする。ここで

$(window).scroll(function(){ 
if($(this).scrollTop() > 200){$('.menu.cloned').fadeOut('slow') 
}else{ 
if($(this).scrollTop() < 200) $('.menu.cloned').fadeIn('slow')} 
}); 

Answer 1

$(window).on("scroll", function(){ 
    $('.menu.cloned').fadeOut('slow'); 

    clearTimeout(menuFadeInTimeout); 
    menuFadeInTimeout = setTimeout(function(){ 
    $('.menu.cloned').fadeIn('slow'); 
    }, 1000); 
});// 

Answer 2

デバウンスを利用して別の方法です。これはおそらく、スクロールイベントごとに上記のコードを実行しないので、少し上手くいくでしょう。これらのコードの

$(window).scroll($.debounce(1000, true, function() { 
    $('.menu.cloned').fadeOut('slow'); 
})); 
$(window).scroll($.debounce(1000, function() { 
    $('.menu.cloned').fadeIn('slow'); 
})); 

Answer 3

いずれも上記動作しませんでした： '（

私のコードは次のとおりです。

.menu{ 
    width: 100%; 
    padding: 10px 0em 5px; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    display: block; 
    z-index: 100; 
    background: rgba(0,0,0,0.5); 
} 

.menu #mobil{ 
    display: none; 
} 

.menu .content_menu{ 
    width: 85%; 
    margin: 0px auto; 
    display: block; 
} 

.menu .content_menu .logo{ 
    float: left; 
    width: 20%; 
} 

.menu .content_menu .logo img{ 
    height: 5.5em; 
} 

.menu .content_menu .polozky{ 
    float: right; 
    width: 78%; 
    vertical-align: top; 
    text-align: right; 
} 

.menu .content_menu .polozky .menu_polozky{ 
    display: inline-block; 
    vertical-align: top; 
} 

.menu .content_menu .polozky .menu_polozky a{ 
    font-size: 1.2em; 
    color: white; 
    text-decoration: none; 
    margin: 1.5em 0.5em; 
    text-transform: uppercase; 
    padding: 0.4em 0em; 
    display: inline-block; 
} 

.menu .content_menu .polozky .menu_polozky a[id="active"]{ 
    border-bottom: 1px solid white; 
} 

.menu .content_menu .polozky .menu_polozky a:hover{ 
    border-bottom: 1px solid white; 
    padding-bottom: calc(0.4em - 1px); 
} 

.menu .content_menu .polozky .ostatni{ 
    display: inline-block; 
    vertical-align: top; 
    margin-left: 1em; 
} 

.menu .content_menu .polozky .ostatni .socialni{ 
    display: block; 
} 

.menu .content_menu .polozky .ostatni .socialni img{ 
    width: 1em; 
    height: 1em; 
    margin: 5px 0.2em; 
} 

.menu .content_menu .polozky .ostatni .ramovane{ 
    display: inline-block; 
    padding: 6px 10px; 
    border: 1px solid white; 
    border-radius: 3px; 
    margin: 0.4em; 
    font-size: 0.8em; 
    color: white; 
    text-decoration: none; 
    text-transform: uppercase; 
    transition-duration: 0.3s; 
    font-weight: 500; 
} 

.menu .content_menu .polozky .ostatni .ramovane:hover{ 
    color: black; 
    background: white; 
} 

そして：

<div class="menu <?php echo $menu_druh; ?>"> 
     <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>