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

上述代码均无效：＆＃39;（

我的代码是：

.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>

滚动时隐藏菜单

3 个答案: