Can someone explain the method for displaying or concealing a menu based on scrolling direction?

Question

Can someone explain the method for displaying or concealing a menu based on scrolling direction?

https://i.stack.imgur.com/tpDx0.jpg I want to hide this menu when scrolling down and show it when scrolling up.

The code for my menu bot is:

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

<p> The above script has been implemented to hide the menu.
My CSS for menu-footer is:</p>

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

What am I doing wrong in getting this script to function correctly? Any alternative solution would be appreciated.

javascript jquery html css

Answer 1

Answer №1

This initial example was created using plain JavaScript to make it easily understandable at a glance in the code. It involves hiding the menu by adjusting the 'bottom' attribute of the CSS style (from 0 to -100) based on the position of the scrollbar (when the scrollbar is more than 0 pixels from the top). The menu reappears (from -100 to 0) when the scrollbar returns to the top (0px), with a CSS transition effect animating the change:

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>
</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: Responding to requests in the comments, this second snippet toggles the menu when scrolling up or down, irrespective of the current position of the scrollbar (to determine the direction, it compares the current position with the previous one and then stores the current position in a variable for comparison in the next scroll event):

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>
</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 by @Prateek

Answer 2

This initial example was created using plain JavaScript to make it easily understandable at a glance in the code. It involves hiding the menu by adjusting the 'bottom' attribute of the CSS style (from 0 to -100) based on the position of the scrollbar (when the scrollbar is more than 0 pixels from the top). The menu reappears (from -100 to 0) when the scrollbar returns to the top (0px), with a CSS transition effect animating the change:

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>
</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: Responding to requests in the comments, this second snippet toggles the menu when scrolling up or down, irrespective of the current position of the scrollbar (to determine the direction, it compares the current position with the previous one and then stores the current position in a variable for comparison in the next scroll event):

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>
</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 by @Prateek

Answer 3

Answer №2

Essentially, there are 3 key concepts you need to implement in order to achieve this effect.

Make the menu/header fixed.
Apply a class to hide the header/menu when scrolling down.
Remove the class to reveal the header/menu when scrolling up.

Check out a live demo created by Marius Craciunoiu for reference.

Here is the HTML code snippet:

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

Javascript code snippet:

// Javascript functionality to toggle header visibility on scroll
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();

    // Ensure sufficient scroll distance
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // Add or remove class based on scroll direction and position
    if (st > lastScrollTop && st > navbarHeight){
        // Scrolling Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scrolling Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

CSS code snippet:

   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}

Answer 4

Essentially, there are 3 key concepts you need to implement in order to achieve this effect.

Make the menu/header fixed.
Apply a class to hide the header/menu when scrolling down.
Remove the class to reveal the header/menu when scrolling up.

Check out a live demo created by Marius Craciunoiu for reference.

Here is the HTML code snippet:

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

Javascript code snippet:

// Javascript functionality to toggle header visibility on scroll
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();

    // Ensure sufficient scroll distance
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // Add or remove class based on scroll direction and position
    if (st > lastScrollTop && st > navbarHeight){
        // Scrolling Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scrolling Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

CSS code snippet:

   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}

Can someone explain the method for displaying or concealing a menu based on scrolling direction?

Answer №1

Answer №2

Similar questions

Notifying asynchronous completion using Gulp, Babel, and configuration file config.yml

Executing a sequence of jQuery's $.when().then() functions

Pass a variety of data points to PHP using Ajax requests

Prevent the use of repetitive borders by utilizing display: inline-block

Is there a way I can incorporate v-for with a computed variable?

send JSON data to a Spring MVC endpoint

Endless loops: How React JS components can render indefinitely

Is there a way to convert arrow functions in vue files through transpilation?

show: alongside move: towards the left

Enabling individuals to transfer their content to Amazon S3

Tips for combining two htmlelements together

Adjust Bootstrap form positioning to be fixed at the bottom of the page

Printing an Iframe using Safari print with Javascript results in an empty output

I am having trouble with Mpdf's block absolute positioning feature not functioning correctly

Having trouble with my jQuery .hover() code not running as expected

Ways to conceal an element when it appears in the initial section of a page

What is the correct method for verifying the presence of a field in JavaScript (or its frameworks)?

In Firefox, the focus outline is not shown on a div that has a mask-image CSS rule applied to

Ways to manipulate the placement of angular material 2 sidenav content to the bottom

It can be frustrating to have to refresh the page twice in order to see changes when utilizing the revalidate feature in Next