Replacement Header

Replacement Header

by Giles Taylor

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<header>
  <h1>Order some food</h1>
</header>

<div id="bar">
  <h1>Order some food</h1>
</div>

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: sans-serif;
	font-size: 62.5%;
  height: 200vh;
}

header {
	width: 100%;
	height: 200px;
	background-color: #ccc;
}

#bar {
	width: 100%;
	background-color: #222;
	top: 0;
	position: fixed;
	z-index: 999;
	transition: height 500ms ease;
  -moz-transition: height 500ms ease;
  -ms-transition: height 500ms ease;
  -o-transition: height 500ms ease;
  -webkit-transition: height 500ms ease;
}

header h1 {
	font-size: 5em;
	line-height: 150px;
	text-align: center;
	color: #fff;
}

#bar h1 {
	font-size: 3.5em;
	color: #fff;
	display: none;
}

JavaScript

$(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 250) {
		  $('#bar').css({
			  'height': '50px'
			});
	    $('#bar h1').fadeIn(1000);			
		}
		else {
			$('#bar').css({
				'height': '0'
			});
			$('#bar h1').css({'display': 'none'});
		};
	});
});