Как показывать или скрывать меню при прокрутке вниз или вверх?

Question

Когда я прокручиваю вниз, чтобы скрыть это меню, и когда я прокручиваю его, чтобы показать это.

Мое меню бота:

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

Сценарий выше, что я пытаюсь использовать для сокрытия мое меню. Мой CSS для меню-футовой является:

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

Что мне не хватает, чтобы сделать этот скрипт работает? Если у вас есть другое решение для меня, это будет полезно.

Answer 1

Я сделал этот первый пример в простом Javascript, чтобы он был легко понят, быстро просмотрев код. Он скрывает меню, изменяя атрибут «bottom» стиля CSS (от 0 до -100) в соответствии с положением полосы прокрутки (когда полоса прокрутки больше 0 пикселей сверху). Меню появляется снова (от -100 до 0), если полоса прокрутки возвращается в верхнюю часть (0px). Переход CSS эффект одушевляет изменение:

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: В соответствии с просьбой о комментариях, это второй фрагмент приносит/скрытие меню при прокрутке вверх/вниз, независимо от тока бара (чтобы найти направление, когда свиток активирован, он сравнивает текущее положение с предыдущей позицией, а затем сохраняет текущее положение в переменной, которая будет сравниваться в следующем событии прокрутки):

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 по @Prateek

Answer 2

В принципе, вам нужно получить это, используя 3 основные идеи.

1. Установить меню/заголовок на фиксированный.
2. При прокрутке вниз добавьте класс для удаления заголовка/меню.
3. При прокрутке вверх удалите класс, который скрывает заголовок/меню.

Вот demo от 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}