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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard PRO React
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: