Заготовка: фиксированный хедер с плавным уменьшением
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ActiveBox</title>
<style>
*{
margin: 0;
padding: 0;
}
#header {
position: fixed;
width: 100%;
z-index: 999;
}
#header .header-content {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
width: 100%;
padding: 40px 0;
background: antiquewhite;
-webkit-transition: padding 1s ease-out, background 1s ease;
-moz-transition: padding 1s ease-out, background 1s ease;
-ms-transition: padding 1s ease-out, background 1s ease; /* IE10 is actually unprefixed */
-o-transition: padding 1s ease-out, background 1s ease;
transition: padding 1s ease-out, background 1s ease;
}
#header.fixed .header-content {
border-bottom: 0;
padding: 25px 0;
background-color: #292c47;
}
.navigation {
float: right;
}
.navigation li {
display: inline-block;
}
.navigation a {
color: #888;
font-size: 13px;
font-weight: 700;
margin-left: 40px;
text-transform: uppercase;
}
.navigation a:hover, .navigation a.active {
color: #333;
}
</style>
</head>
<body style="height: 2000px;">
<header id="header">
<div class="header-content">
<nav class="navigation">
<ul>
<li><a href="#">Один</a></li>
<li><a href="#">Два</a></li>
<li><a href="#">Три</a></li>
<li><a href="#">Четыре</a></li>
<li><a href="#">Пять</a></li>
</ul>
</nav>
</div><!-- header content -->
</header><!-- header -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(window).on('scroll', function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$('#header').addClass('fixed');
} else {
$('#header').removeClass('fixed');
}
});
});
</script>
</body>
</html>