MrQwest/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
  background-color: white;
}

.page-1 {
  background-color: #95A5A6;
}

.page-2 {
  background-color: #16A085;
}

.page-3 {
  background-color: #E67E22;
}

.page {
  margin: 0.5rem 0;
  padding: 1rem
}

nav {
  background-color: #ECF0F1;
}

ul {
  margin: 0;
  padding: 1rem;
}
nav li {
  display: inline;
}

.fixed-nav {
  position: fixed;
  top: 0;
  height: 40px;
  width: 100%;
  border: 1px solid red;
  margin-bottom:45px;
}
</style>
</head>
<body>
<nav>
  <ul>
    <li><a href="#link1" id="link1">Link 1</a></li>
    <li><a href="#link2" id="link2">Link 2</a></li>
    <li><a href="#link3" id="link3">Link 3</a></li>
  </ul>
</nav>
  <div class="content">
    <section class="page page-1">Section 1</section>
    <section class="page page-2">Section 2</section>
    <section class="page page-3">Section 3</section>
  </div>
<script id="jsbin-javascript">
// +++++++++++++++++
// INTENT
// So here's a vertically-aligned nav. Hitting a link on the nav bar will
// scroll between sections... but what I'm after is when hitting a link
// on the nav, the nav stays central and the section scrolls up from beneath,
// as the section scrolls up, it hits the nav and then pushes that to the top
// where it sticks to the top of the page.
//
// And yes, I'm aware the JS below could be heavily optimised :)
//
// +++++++++++++++++


var height = window.innerHeight;
var middle = (height - 96) / 2;


$('.page').css({"height": height});
$('.page-1').css({"margin-top": height});
$('nav').css({"margin-top": middle});

var offset = 0,
    divs = $('section');

$('#link1').on('click' , function(){
   $('nav').animate({
       marginTop: "0"
    }).addClass("fixed-nav");
     $('html, body').animate({scrollTop: $('.page-1').offset().top}, 1000);
  $('.page-1').css({"padding-top": 50});
    return false;
});


$('#link2').on('click' , function() {
  $('nav').animate({
       marginTop: "0"
    }).addClass("fixed-nav");
  $('html, body').animate({scrollTop: $('.page-2').offset().top}, 1000);
  $('.page-2').css({"padding-top": 50});
  return false;
});


$('#link3').on('click' , function() {
  $('nav').animate({
       marginTop: "0"
  }).addClass("fixed-nav");
  $('html, body').animate({scrollTop: $('.page-3').offset().top}, 1000);
  $('.page-3').css({"padding-top": 50});
  return false;
});
</script>


</body>
</html>

## jsbin.newel.css
body {
  background-color: white;
}

.page-1 {
  background-color: #95A5A6;
}

.page-2 {
  background-color: #16A085;
}

.page-3 {
  background-color: #E67E22;
}

.page {
  margin: 0.5rem 0;
  padding: 1rem
}

nav {
  background-color: #ECF0F1;
}

ul {
  margin: 0;
  padding: 1rem;
}
nav li {
  display: inline;
}

.fixed-nav {
  position: fixed;
  top: 0;
  height: 40px;
  width: 100%;
  border: 1px solid red;
  margin-bottom:45px;
}

## jsbin.newel.js
// +++++++++++++++++
// INTENT
// So here's a vertically-aligned nav. Hitting a link on the nav bar will
// scroll between sections... but what I'm after is when hitting a link
// on the nav, the nav stays central and the section scrolls up from beneath,
// as the section scrolls up, it hits the nav and then pushes that to the top
// where it sticks to the top of the page.
//
// And yes, I'm aware the JS below could be heavily optimised :)
//
// +++++++++++++++++


var height = window.innerHeight;
var middle = (height - 96) / 2;


$('.page').css({"height": height});
$('.page-1').css({"margin-top": height});
$('nav').css({"margin-top": middle});

var offset = 0,
    divs = $('section');

$('#link1').on('click' , function(){
   $('nav').animate({
       marginTop: "0"
    }).addClass("fixed-nav");
     $('html, body').animate({scrollTop: $('.page-1').offset().top}, 1000);
  $('.page-1').css({"padding-top": 50});
    return false;
});


$('#link2').on('click' , function() {
  $('nav').animate({
       marginTop: "0"
    }).addClass("fixed-nav");
  $('html, body').animate({scrollTop: $('.page-2').offset().top}, 1000);
  $('.page-2').css({"padding-top": 50});
  return false;
});


$('#link3').on('click' , function() {
  $('nav').animate({
       marginTop: "0"
  }).addClass("fixed-nav");
  $('html, body').animate({scrollTop: $('.page-3').offset().top}, 1000);
  $('.page-3').css({"padding-top": 50});
  return false;
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	body {
	background-color: white;
	}

	.page-1 {
	background-color: #95A5A6;
	}

	.page-2 {
	background-color: #16A085;
	}

	.page-3 {
	background-color: #E67E22;
	}

	.page {
	margin: 0.5rem 0;
	padding: 1rem
	}

	nav {
	background-color: #ECF0F1;
	}

	ul {
	margin: 0;
	padding: 1rem;
	}
	nav li {
	display: inline;
	}

	.fixed-nav {
	position: fixed;
	top: 0;
	height: 40px;
	width: 100%;
	border: 1px solid red;
	margin-bottom:45px;
	}
	</style>
	</head>
	<body>
	<nav>
	<ul>
	<li><a href="#link1" id="link1">Link 1</a></li>
	<li><a href="#link2" id="link2">Link 2</a></li>
	<li><a href="#link3" id="link3">Link 3</a></li>
	</ul>
	</nav>
	<div class="content">
	<section class="page page-1">Section 1</section>
	<section class="page page-2">Section 2</section>
	<section class="page page-3">Section 3</section>
	</div>
	<script id="jsbin-javascript">
	// +++++++++++++++++
	// INTENT
	// So here's a vertically-aligned nav. Hitting a link on the nav bar will
	// scroll between sections... but what I'm after is when hitting a link
	// on the nav, the nav stays central and the section scrolls up from beneath,
	// as the section scrolls up, it hits the nav and then pushes that to the top
	// where it sticks to the top of the page.
	//
	// And yes, I'm aware the JS below could be heavily optimised :)
	//
	// +++++++++++++++++


	var height = window.innerHeight;
	var middle = (height - 96) / 2;


	$('.page').css({"height": height});
	$('.page-1').css({"margin-top": height});
	$('nav').css({"margin-top": middle});

	var offset = 0,
	divs = $('section');

	$('#link1').on('click' , function(){
	$('nav').animate({
	marginTop: "0"
	}).addClass("fixed-nav");
	$('html, body').animate({scrollTop: $('.page-1').offset().top}, 1000);
	$('.page-1').css({"padding-top": 50});
	return false;
	});


	$('#link2').on('click' , function() {
	$('nav').animate({
	marginTop: "0"
	}).addClass("fixed-nav");
	$('html, body').animate({scrollTop: $('.page-2').offset().top}, 1000);
	$('.page-2').css({"padding-top": 50});
	return false;
	});


	$('#link3').on('click' , function() {
	$('nav').animate({
	marginTop: "0"
	}).addClass("fixed-nav");
	$('html, body').animate({scrollTop: $('.page-3').offset().top}, 1000);
	$('.page-3').css({"padding-top": 50});
	return false;
	});
	</script>


	</body>
	</html>