<header class="static-header">
	<img src="https://s.cdpn.io/profiles/user/328575/80.jpg?4" height="40" height="auto"/>
	<nav>
		<a href="#section1">Section 1</a>
		<a href="#section2">Section 2</a>
		<a href="#section3">Section 3</a>
		<a href="#section4">Section 4</a>
	</nav>
</header>
<header class="fixed-header">
	<div class="fheader__container">
		<img src="https://s.cdpn.io/profiles/user/328575/80.jpg?4" width="30px" height="auto"/>
		<nav>
			<a href="#section1">Section 1</a>
			<a href="#section2">Section 2</a>
			<a href="#section3">Section 3</a>
			<a href="#section4">Section 4</a>
		</nav>
	</div>
</header>
<div class="container__content">
	<div id="section1" class="section1">
		<h1>Section 1</h1>
	</div>
	<div id="section2" class="section2">
		<h1>Section 2</h1>
	</div>
	<div id="section3" class="section3">
		<h1>Section 3</h1>
	</div>
	<div id="section4" class="section4">
		<h1>Section 4</h1>
	</div>
</div>
<footer>

</footer>

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	margin: 0;
	padding: 0 15px 30px 15px;
	box-sizing: border-box;
	background: #F3F3F3;

	.static-header {
		max-width: 900px;
		overflow: hidden;
		box-sizing: border-box;
		margin: 20px auto;
		text-align: center;

		img {
			margin: 0 auto;
		}

		nav {
			padding: 20px 0 0;
			max-width: 400px;
			margin: 0 auto;

			a {
				display: inline-block;
				color: #666666;
				text-decoration: none;
				font-size: 14px;
				cursor: pointer;
				
				&:not(:last-of-type) {
					padding-right: 30px;
				}

				&:hover {
					color: #333333;
				}
			}
		}
	}
	
	.fixed-header {
		display: none;
		position: fixed;
		top: 0;
		background: #FFFFFF;
		margin: 0 -15px;
		width: 100%;
		border-bottom: 1px solid #CCCCCC;
		box-sizing: border-box;
		box-shadow: 0px 0px 10px 0 rgba(#000000, 0.5);
		opacity: 0.9;
		z-index: 100;
		
		.fheader__container {
			max-width: 900px;
			padding: 15px 30px;
			margin: 0 auto;
			overflow: hidden;
			box-sizing: border-box;
		
			img {
				float: left;
				height: 30px;
				width: auto;
			}

			nav {
				padding: 5px 0;
				max-width: 400px;
				float: right;
				text-align: right;

				a {
					display: inline-block;
					color: #666666;
					text-decoration: none;
					font-size: 14px;
					cursor: pointer;

					&:not(:last-of-type) {
						padding-right: 15px;
					}

					&:hover {
						color: #333333;
					}
				}
			}
		}
	}

	.container__content {
		margin: 0 auto;
		max-width: 900px;
		background: rgba(255, 255, 255, 0.8);
		box-sizing: border-box;
		min-height: 1000px;
		overflow: hidden;
		padding: 15px;
		clear: both;

		> div {
			min-height: 500px;
			display: block;
			overflow: hidden;
			
			h1 {
				text-align: center;
				line-height: 500px;
				color: #666666;
				margin: 0;
			}
			
			&.section1 {
				background: #ffd6cd;
			}
			
			&.section2 {
				background: #ddebfd;
			}
			
			&.section3 {
				background: #ffd6cd;
			}
			
			&.section4 {
				background: #ddebfd;
			}
		}
	}
}

$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
	
});
	
$(window).scroll(function() {    
	var scroll = $(window).scrollTop();

	if (scroll >= 200) {
		$(".fixed-header").slideDown();
	} else {
		$(".fixed-header").slideUp();
	}
});