Bottom mobile menu

Reveal bottom mobile menu on scroll up

by Viktor H. Morales

HTML

<nav id="mobile">
	Menu
</nav>

CSS

body {
  min-height: 1024px;
}
#mobile {
  display: none;
  background-color: #666;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
}

JavaScript

var prevScrollpos = window.pageYOffset;
var currentScrollPos;
var nav = jQuery("nav#mobile");
const md = window.matchMedia( "(max-width: 767.98px)" );

/**
 * Function to add fadeIn and fadeOut effect to the mobile version menu
 */
function onScroll()
{
	currentScrollPos = window.pageYOffset;
	if (md.matches)
	{
      if (prevScrollpos > currentScrollPos) {
        nav.fadeIn("fast");
      } else {
        nav.fadeOut("fast");
      }
	}
	prevScrollpos = currentScrollPos;
}
/* Scripts that run on window scroll */
jQuery(window).on('scroll', function(){
	onScroll();
  console.log('Current Scroll Position: ' + currentScrollPos);
});