Skip to content

Instantly share code, notes, and snippets.

@breakfastpizza

breakfastpizza/The-Amazing-Sticky-Shrinking-Navbar.markdown

Created November 6, 2014 19:03
Show Gist options
  • Save breakfastpizza/6f6cb547d0343cae5357 to your computer and use it in GitHub Desktop.
Save breakfastpizza/6f6cb547d0343cae5357 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by bedlogic.
Raw
index.html
<nav>
<div class="toggleNav">
<div id="toggle" >
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
<div id="subnav">
<ul>
<li><a href="cookie">cookie</a></li>
<li><a href="section-about">About Stuff</a></li>
<li><a href="3">3</a></li>
<li><a href="4">4</a></li>
</ul>
</div>
</nav>
<div id="content">
<div class="item cookie">cookie</div>
<div class="item section-about">About Stuff</div>
<div class="item 3">3</div>
<div class="item 4">4</div>
</div>
Raw
script.js
$(document).ready(function () {
$(".toggleNav").click(function () {
$("#subnav").toggleClass("active");
$(".toggleNavButton").toggleClass("active");
});
$("#toggle").click(function() {
$(this).toggleClass("on");
$(".menu").slideToggle();
});
$('nav a').on('click', function () {
var link_name = $(this).attr("href");
$('html, body').animate({
scrollTop: $('.'+link_name).offset().top - 150
}, 800);
return false;
});
var navPos = $('nav').offset();
$(window).on('scroll', function () {
if($(window).scrollTop() > parseInt(navPos.top) - 60){
$('nav').css({
'position' : 'fixed',
'right' : '0%',
'top' : '0%'
});
} else {
$('nav').css({
'position' : 'absolute',
'right' : '0%'
});
}
});
});
Raw
style.css
* {
-webkit-transition-timing-function: ease-out;
/* Safari and Chrome */
transition-timing-function: ease-out;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
list-style: none;
padding: 0;
margin: 0;
}
body {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
color: #F2F2F2;
background-color: #41558C;
}
.toggleNav {
background-color: #777;
width: 100%;
height: 50px;
text-align: center;
cursor: pointer;
color: white;
padding: 5px;
}
nav {
width: 100%;
min-height: 50px;
position: relative;
top: 0;
}
#toggle {
width: 28px;
height: 30px;
margin: 10px auto;
}
#toggle div {
width: 100%;
height: 5px;
background: white;
margin: 4px auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#toggle.on .one {
-webkit-transform: rotate(45deg) translate(5px, 5px);
-ms-transform: rotate(45deg) translate(5px, 5px);
transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on .two {
opacity: 0;
}
#toggle.on .three {
-webkit-transform: rotate(-45deg) translate(7px, -8px);
-ms-transform: rotate(-45deg) translate(7px, -8px);
transform: rotate(-45deg) translate(7px, -8px);
}
#subnav {
width: 100%;
background-color: #666;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
overflow: hidden;
height: 0px;
}
#subnav.active {
height: 50px;
}
#subnav ul {
width: 615px;
margin: 0 auto;
display: block;
}
#subnav ul li {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
display: inline-block;
text-align: center;
width: 150px;
padding: 10px 0;
height: 50px;
vertical-align: middle;
display: table-cell;
}
#subnav ul li a {
color: white;
}
#subnav ul li:hover {
background-color: #404040;
}
#content {
width: 40%;
margin: 60px auto;
}
.item {
color: white;
width: 70%;
height: 500px;
border: 2px solid white;
margin: 160px auto;
font-size: 20px;
overflow: hidden;
}
#content {
width: 40%;
margin: 60px auto;
}
.item {
color: white;
width: 70%;
height: 500px;
border: 2px solid white;
margin: 160px auto;
font-size: 20px;
overflow: hidden;
}
Raw
The-Amazing-Sticky-Shrinking-Navbar.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment