Wie blende ich ein Menü ein oder aus, wenn ich nach unten oder oben blättere?

Question

Wenn ich scrolle nach unten, um dieses Menü auszublenden und wenn ich scrolle, um dies zu zeigen.

Mein Menü Bot ist:

<script> 
      var previousScroll = 0; 
      $(window).scroll(function(event){ 
       var scroll = $(this).scrollTop(); 
       if (scroll > previousScroll){ 
        $("menu-footer").filter(':not(:animated)').slideUp(); 
       } else { 
        $("menu-footer").filter(':not(:animated)').slideDown(); 
       } 
       previousScroll = scroll; 
      }); 
    </script> 

    <section id="menu-footer"> 
     <ul> 
      <li> 
       <li><a href="javascript:history.back()"><i class="fa fa-arrow-circle-left"></i><?php _e("Back", ET_DOMAIN); ?></a></li> 
      </li> 
      <li> 
       <a class="<?php echo $nearby_active; ?>" href="#" id="search-nearby"><i class="fa fa-compass"></i><?php _e("Nearby", ET_DOMAIN); ?></a> 
       <form id="nearby" action="<?php echo get_post_type_archive_link('place') ?>" method="get" > 
        <input type="hidden" name="center" id="center_nearby" /> 
       </form> 
      </li> 
      <!--<li><a href="#"><i class="fa fa-plus"></i>Submit</a></li>--> 
      <!--<li> 
       <a class="<?php echo $review_active; ?>" href="<?php echo et_get_page_link('list-reviews') ?>"> 
        <i class="fa fa-comment"></i><?php _e("Reviews", ET_DOMAIN); ?> 
       </a> 
      </li>--> 
      <li><a class="<?php echo $post-place; ?>" href="<?php echo et_get_page_link('post-place')?>"><i class="fa fa-flag-checkered"></i><?php _e("Post an Ad", ET_DOMAIN); ?></a></li> 
      <?php if(has_nav_menu('et_mobile_header')) { ?> 
      <li> 
       <li><a href="#" class="search-btn"><i class="fa fa-search-plus"></i><?php _e("Search", ET_DOMAIN); ?></a></li> 
      </li>  
      <li>     
       <a href="javascript:history.back()"><i class="fa fa-refresh"></i><?php _e("Refresh", ET_DOMAIN); ?></a> 
      </li> 
      <?php } ?> 
     </ul> 
    </section> 

Das Skript oben ist, was ich versuche zu verstecken mein Menü. Meine CSS für das Menü-footer ist:

#menu-footer { 
    width: 100%; 
    background: #5f6f81; 
    position: fixed; 
    bottom: 0; 
    transition: top 0.2s ease-in-out; 
    z-index: 100 
} 

Was ich dieses Skript zu machen fehle zu arbeiten? Wenn Sie eine andere Lösung für mich haben, wird es hilfreich sein.

Answer 1

Ich habe dieses erste Beispiel in normalem Javascript erstellt, um es mit einem kurzen Blick in den Code zu verstehen. Es verbirgt das Menü, indem es das untere Attribut des CSS-Stils (von 0 bis -100) entsprechend der Position der Bildlaufleiste ändert (wenn die Bildlaufleiste mehr als 0 Pixel von oben entfernt ist). Das Menü wird wieder angezeigt (von -100 bis 0), wenn die Bildlaufleiste wieder nach oben zeigt (0px). Ein CSS-Übergangseffekt belebt die Änderung:

window.addEventListener("scroll", bringmenu); 
 

 
function bringmenu() { 
 
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) { 
 
     document.getElementById("bottommenu").style.bottom = "-100%"; 
 
    } else { 
 
     document.getElementById("bottommenu").style.bottom = "0"; 
 
    } 
 
}

body { 
 
    margin: 0; 
 
    background: lavender; 
 
} 
 

 
#bottommenu { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    background: tomato; 
 
    -webkit-transition: bottom 2s; 
 
    transition: bottom 2s; 
 
}

<div id=content> 
 
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p> 
 
</div> 
 

 
<div id=bottommenu> 
 
<span>bottom </span><span>bottom </span><span>bottom </span><span>bottom </span><br><span>bottom </span><span>bottom </span><span>bottom </span><span>bottom </span> 
 
</div>

Update: Wie auf den Kommentaren aufgefordert, dieser zweite Schnipsel bringt/das Menü ausgeblendet, wenn/nach unten Scrollen nach oben, und zwar unabhängig von der Bar der aktuellen Position (um die Richtung zu finden, wenn die Bildlauffunktion aktiviert ist, vergleicht sie die aktuelle Position mit der vorherigen Position und speichert dann die aktuelle Position in einer Variablen, die beim nächsten Bildlaufereignis verglichen werden soll):

scroll direction code von @Prateek

Answer 2

Grundsätzlich müssen Sie dies mit 3 Hauptideen bekommen.

1. Menü/Kopfzeile auf fix setzen.
2. Wenn Sie nach unten scrollen, fügen Sie eine Klasse hinzu, um die Kopfzeile/das Menü zu entfernen.
3. Entfernen Sie beim Heraufscrollen die Klasse, die den Header/das Menü versteckt. Hier

ist ein demo von Marius Crăciunoiu

Html:

<header class="nav-down"> 
    This is your menu. 
</header> 
<main> 
    This is your body. 
</main> 
<footer> 
    This is your footer. 
</footer> 

Javascript:

// Hide Header on on scroll down 
var didScroll; 
var lastScrollTop = 0; 
var delta = 5; 
var navbarHeight = $('header').outerHeight(); 

$(window).scroll(function(event){ 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
     hasScrolled(); 
     didScroll = false; 
    } 
}, 250); 

function hasScrolled() { 
    var st = $(this).scrollTop(); 

    // Make sure they scroll more than delta 
    if(Math.abs(lastScrollTop - st) <= delta) 
     return; 

    // If they scrolled down and are past the navbar, add class .nav-up. 
    // This is necessary so you never see what is "behind" the navbar. 
    if (st > lastScrollTop && st > navbarHeight){ 
     // Scroll Down 
     $('header').removeClass('nav-down').addClass('nav-up'); 
    } else { 
     // Scroll Up 
     if(st + $(window).height() < $(document).height()) { 
      $('header').removeClass('nav-up').addClass('nav-down'); 
     } 
    } 

    lastScrollTop = st; 
} 

CSS:

body { 
    padding-top: 40px; 
} 

header { 
    background: #f5b335; 
    height: 40px; 
    position: fixed; 
    top: 0; 
    transition: top 0.2s ease-in-out; 
    width: 100%; 
} 

.nav-up { 
    top: -40px; 
} 

main { 
    background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= 
    ) repeat; 
    height: 2000px; 
} 

footer { background: #ddd;} 
* { color: transparent}