" yatendra pratap singh by Menu hide On Scroll top for mobile "
Bootstrap 4.1.1 Snippet by yatendra00013

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Scroll up and down</title> </head> <body> <nav> <div class="container"> <a href="#" id="brand">Brand</a> <button> <span></span> <span></span> <span></span> </button> <ul class="navbar-menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> <footer> <div class="container"> <ul class="navbar-menu"> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="https://wa.me/919129894601?text=I'm%20inquiring%20about%20the%20Product%20listing" class="whatsapp">Whatapp</a></li> </ul> </div> </footer> </body> </html>
body { background: #eee; min-height: 3000px; padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; } .container { width: 80%; margin: 0 auto; clear: both; } a { display: inline-block; color: #333; text-decoration: none; } nav { background: #fff; height: 80px; line-height: 80px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); position: fixed; top: 0; left: 0; width: 100%; z-index: 9998; transition: all 0.5s; } nav.scrollUp { transform: translateY(-80px); } nav ul.navbar-menu { margin: 0; padding: 0; display: inline-block; float: right; } nav ul.navbar-menu li { display: inline-block; margin: 0 5px; } nav ul.navbar-menu li a { color: #666; font-size: 14px; } nav a#brand { text-transform: uppercase; foat: left; font-weight: 800; font-size: 20px; } nav button { background: none; width: 30px; height: 40px; margin-top: 20px; border: none; float: right; display: inline-block; cursor: pointer; display: none; } nav button span { width: 30px; height: 40px; height: 2px; background: #333; display: block; margin: 5px 0; } footer{ background: #fff; height: 80px; line-height: 80px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9998; transition: all 0.5s; display: none; } footer.scrolldown { transform: translateY(180px); } footer a#brand { text-transform: uppercase; foat: left; font-weight: 800; font-size: 20px; } footer ul.navbar-menu { margin: 0; padding: 0; text-align: center; width: 100%; } footer ul.navbar-menu li { display: inline-table; margin: 0 10px; } footer ul.navbar-menu li a { color: #666; font-size: 20px; } @media (max-width: 400px) { nav ul.navbar-menu { display: none; } nav button { display: block; } }
$(document).ready(function () { var isAndroid = /android|ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase()); if (isAndroid) { $('footer').show(); 'use strict'; var c, currentScrollTop = 0, navbar = $('nav'), footer = $('footer'); $(window).scroll(function () { var a = $(window).scrollTop(); var b = navbar.height(); currentScrollTop = a; if (c < currentScrollTop && a > b + b) { navbar.addClass("scrollUp"); footer.addClass("scrolldown"); } else if (c > currentScrollTop && !(a <= b)) { navbar.removeClass("scrollUp"); footer.removeClass("scrolldown"); } c = currentScrollTop; }); } }); </script>

Related: See More

Vue Paper Dashboard PRO
Creating password field text hide show via a single class
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
BS4 Login, Register FORM + Mobile

Questions / Comments: