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

Calls to debounced functions are postponed, with all of them running once the waiting timer is complete

The anchorEl state in Material UI Popper is having trouble updating

The mysterious behavior of CSS3 transforms on intricate rotations

Reproducing scripts in Google Tag Manager and React/Next applications

Exploring the Power of ColdFusion 9, JSON, and Embracing jQuery Easy

Angular allows for the creation of a unique webpage layout featuring 6 divs

Exploring the option of eliminating the email field from the PHP redirect function and transforming it into a pop-up notification

Guide to exporting several Chart.JS graphs to a PDF document with each graph on a separate page

Retrieve the stylesheets located within the <head> section of an external webpage and load them onto the current page

Displaying a separate page upon clicking the add button in jqGrid: Tips and Tricks

The HtmlHelper ActionLink consistently establishes the current controller instead of allowing for the specification of another controller

Challenge with Filter Functionality when Activating Button

Issue with animation transition not triggering on initial click

What could be the reason for the sudden lack of content from the Blogger API?

Error Unhandled in Node.js Application

Is there a way to display a secondary header once the page is scrolled down 60 pixels?

using outlines for FontAwesome icons in React Native

Enable strict mode for older web browsers

Enhancing the appearance of the MUI DatePicker

Error: Type Error when using custom App and getInitialProps in Next.js