Come mostrare o nascondere un menu quando si scorre verso il basso o verso l'alto?

Question

Quando sto scorrendo verso il basso per nascondere questo menu e quando sto scorrendo verso l'alto per mostrare questo.

mio menù bot è:

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

Lo script sopra è quello che cerco di usare per nascondere il mio menu. mio CSS per il menu-footer è:

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

Che cosa mi manca per rendere questo script di lavoro? Se hai un'altra soluzione per me sarà utile.

Answer 1

Ho fatto questo primo esempio in plain Javascript per renderlo facile da capire con una rapida occhiata nel codice. Nasconde il menu modificando l'attributo 'bottom' dello stile CSS (da 0 a -100) in base alla posizione della barra di scorrimento (quando la barra di scorrimento è più di 0 pixel dall'alto). Il menu appare di nuovo (da -100 a 0) se la barra di scorrimento torna all'inizio (0px). Un effetto di transizione CSS anima il cambiamento:

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>

Aggiornamento: Come richiesto sui commenti, questo secondo frammento di porta/nasconde il menu durante lo scorrimento su/giù, a prescindere dalla corrente del bar posizione (per trovare la direzione, quando lo scroll è attivato confronta la posizione corrente con la posizione precedente quindi memorizza la posizione corrente in una variabile da confrontare nell'evento di scroll successivo):

var lastScrollTop = 0; 
 

 
window.addEventListener("scroll", function(){ 
 
    var st = window.pageYOffset || document.documentElement.scrollTop; 
 
    if (st > lastScrollTop){ 
 
     document.getElementById("bottommenu").style.bottom = "-100%"; 
 
    } else { 
 
     document.getElementById("bottommenu").style.bottom = "0"; 
 
    } 
 
    lastScrollTop = st; 
 
}, false);

body { 
 
    margin: 0; 
 
    background: honeydew; 
 
} 
 

 
#bottommenu { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    background: hotpink; 
 
    -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>

scroll direction code da @Prateek

Answer 2

Fondamentalmente è necessario ottenere questo utilizzando 3 idee principali.

1. Impostare menu/intestazione su fisso.
2. Durante lo scorrimento verso il basso, aggiungere una classe per rimuovere l'intestazione/menu.
3. Quando si scorre verso l'alto, rimuovere la classe che nasconde l'intestazione/menu.

Ecco un demo da Marius Craciunoiu

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}