web-dev-qa-db-fra.com

Comment afficher ou masquer un menu lorsque je fais défiler vers le haut ou vers le bas?

enter image description here Lorsque je défile vers le bas pour masquer ce menu et lorsque je défile vers le haut pour le montrer.

Mon bot de menu est:

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

Le script ci-dessus est ce que j'essaie d'utiliser pour masquer mon menu. Mon CSS pour le pied de menu est:

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

Qu'est-ce qui me manque pour que ce script fonctionne? Si vous avez une autre solution pour moi, ce sera utile.

javascriptjqueryhtmlcss
11
Vladut

J'ai fait ce premier exemple en Javascript simple pour le rendre facile à comprendre avec un rapide coup d'œil dans le code. Il masque le menu en changeant l'attribut 'bas' du style CSS (de 0 à -100) en fonction de la position de la barre de défilement (lorsque la barre de défilement est à plus de 0 pixels du haut). Le menu réapparaît (de -100 à 0) si la barre de défilement revient en haut (0px). Un effet de transition CSS anime le changement:

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>

Mise à jour: Comme demandé dans les commentaires, ce deuxième extrait apporte/masque le menu lors du défilement vers le haut/bas, quelle que soit la position actuelle de la barre (pour trouver le direction, lorsque le défilement est activé, il compare la position actuelle à la position précédente puis stocke la position actuelle dans une variable à comparer dans le prochain événement de défilement):

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>

code de sens de défilement par @ Prateek

20
Le____

Fondamentalement, vous devez obtenir cela en utilisant 3 idées principales.

  1. Définissez le menu/en-tête sur fixe.
  2. Lorsque vous faites défiler vers le bas, ajoutez une classe pour supprimer l'en-tête/menu.
  3. Lorsque vous faites défiler vers le haut, supprimez la classe qui masque l'en-tête/menu.

Voici une démo de 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}
4
claudios