Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Auto hiding Navbar on scroll down
<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="#">page a</a></li>
<li><a href="#">page b</a></li>
<li><a href="#">page c</a></li>
<li><a href="#">page d</a></li>
</ul>
</div>
</nav>
$(document).ready(function () {
'use strict';
var c, currentScrollTop = 0,
navbar = $('nav');
$(window).scroll(function () {
var a = $(window).scrollTop();
var b = navbar.height();
currentScrollTop = a;
if (c < currentScrollTop && a > b + b) {
navbar.addClass("scrollUp");
} else if (c > currentScrollTop && !(a <= b)) {
navbar.removeClass("scrollUp");
}
c = currentScrollTop;
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
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
&.scrollUp
transform: translateY(-80px)
ul.navbar-menu
margin: 0
padding: 0
display: inline-block
float: right
li
display: inline-block
margin: 0 10px
a
color: #666
font-size: 14px
a#brand
text-transform: uppercase
foat: left
font-weight: 800
font-size: 20px
button
background: none
width: 30px
height: 40px
margin-top: 20px
border: none
float: right
display: inline-block
cursor: pointer
display: none
span
width: 30px
height: 40px
height: 2px
background: #333
display: block
margin: 5px 0
@media (max-width: 768px)
nav ul.navbar-menu
display: none
nav button
display: block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.