<style>
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.container {
width: 90%;
min-width: 740px;
margin: 0 auto;
}
ul {
float: right;
}
li {
display: inline;
float: left;
}
img.logo {
float: left;
height: 60px;
}
img.logo.large {
height: 60px;
}
img.logo.small {
margin-top: 10px;
height: 30px;
}
nav {
width: 100%;
margin: 0 auto;
}
/* Section */
section.stretch {
float: left;
height: 1500px;
width: 100%;
}
section.stretch p{
font-family: sans-serif;
font-size: 30px;
color: #969696;
text-align: center;
position: relative;
margin-top: 250px;
}
section.stretch p.bottom {
top: 100%;
padding-bottom: 1em;
}
/* Header */
header {
background-color: #c7c7c7;
border-bottom: 1px solid #aaa;
float: left;
width: 100%;
position: fixed;
z-index: 10;
}
header a {
color: #969696;
text-decoration: none;
font-family: 'Amaranth', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
header a.active, header a:hover {
color: #3d3d3d;
}
header li {
margin-right: 30px;
}
/* header large */
header.large {
height: 120px;
}
header.large img {
margin-top: 30px;
}
header.large li {
margin-top: 52px;
}
/* header small */
header.small {
height: 50px;
}
header.small img {
}
header.small li {
margin-top: 17px;
}
/* Transitions */
header,
nav,
a,
img,
li {
transition: .7s all;
-moz-transition: .7s all;
-webkit-transition: .7s all;
-o-transition: .7s all;
}
</style>
<!-- partial:index.partial.html -->
<header class="large">
<div class="container">
<nav>
<a href="http://uixdesignstudio.com"><img class="logo" src="https://cdn1.iconfinder.com/data/icons/random-crafticons/48/misc-_smile_-128.png"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Posts</a></li>
<li><a href="#">Awesome Freebies</a></li>
</ul>
</nav>
</div>
</header>
<section class="stretch">
<p>Let's get the menu to shrink!</p>
<p class="bottom">End of the line.</p>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(document).on("scroll", function() {
if($(document).scrollTop()>100) {
$("header").removeClass("large").addClass("small");
} else {
$("header").removeClass("small").addClass("large");
}
if($(document).scrollTop()>100) {
$("img.logo").removeClass("large").addClass("small");
} else {
$("img.logo").removeClass("small").addClass("large");
}
});
</script>
