Hide-Show navbar on scroll direction

This script works with jQuery, so please include jQuery first. This works on mobile as well as large screens. Let a div with class “bottomnavbar” be the bottom navigation bar that you want to hide and show on page scroll.

---

Demo

Open demo in a full window – https://demos.webdevpuneet.com/set1/nav-scroll/index.html

---

Now use the following script for the functionality:

CSS:

.bottomnavbar{
  position: fixed;
  z-index: 111;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  max-width: 100%;
  background: #ffffff;
  height: 60px;
  box-sizing: border-box;
  box-shadow: 0 -2px 12px 0 rgba(43,45,46,0.06);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1);
  -moz-transition: -moz-transform 1s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.bottomnavbar.slidedown {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}

---

jQuery – JavaScript

 /* Hide-show on scroll direction */
  var prev = 0;
  var $window = $(window);
  var nav = $('.bottomnavbar');

  $window.on('scroll', function(){
    var scrollTop = $window.scrollTop();
    if ( scrollTop > 0.25 * $window.height() ){
      nav.toggleClass('slidedown', scrollTop > prev);
      prev = scrollTop;
    }
  });

This script is intelligent enough to not hide the bottom bar when the scroll is close to the top of the page …