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 …