christianjuth/index.html

## index.html
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.onscreen.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="pages">
      <section id="html5">
           <h1>HTML5</h1>

          <p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C).[3] The previous version, HTML 4, was standardised in 1997.</p>
          <p>Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.</p>
      </section>
      <section id="css3">
           <h1>CSS3</h1>

          <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.</p>
      </section>
      <section id="bootstrap">
           <h1>Bootstrap</h1>

          <p>Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. The bootstrap framework aims to ease web development.</p>
          <p>Bootstrap is a front end, that is an interface between the user and the server-side code which resides on the "back end" or server. And it is a web application framework, that is a software framework which is designed to support the development of dynamic websites and web applications.</p>
      </section>
    </div>
  </body>
</html>

## index.js
$(document).scroll(function () {

  //get current section
  var $currentPage = $('.pages > section:onScreen').first();
  var $title = $('.pages > section:onScreen').first().find('h1').first();

  //update url
  if (history && history.pushState && location.protocol !== "file:") {
    history.pushState({}, $title.text(), "/#"+$currentPage.attr('id'));
  } else{
    location.hash = $currentPage.attr('id');
  }
});

## jquery.onscreen.js
// onScreen jQuery plugin v0.2.1
// (c) 2011-2013 Ben Pickles
//
// http://benpickles.github.io/onScreen
//
// Released under MIT license.
;(function($) {
  $.expr[":"].onScreen = function(elem) {
    var $window = $(window)
    var viewport_top = $window.scrollTop()
    var viewport_height = $window.height()
    var viewport_bottom = viewport_top + viewport_height
    var $elem = $(elem)
    var top = $elem.offset().top
    var height = $elem.height()
    var bottom = top + height

    return (top >= viewport_top && top < viewport_bottom) ||
           (bottom > viewport_top && bottom <= viewport_bottom) ||
           (height > viewport_height && top <= viewport_top && bottom >= viewport_bottom)
  }
})(jQuery);

## style.css
html,
body {
  margin: 0;
  padding: 0;
  height: 101%;
  width: 100%;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.pages {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.pages > section {
  display: inline-block;
  min-height: 100%;
  padding: 10px;
  font-family: Georgia;
}
.pages > section:nth-child(even) {
  background-color: #000;
  color: #fff;
}
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.onscreen.js"></script>
	<script type="text/javascript" src="index.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<div class="pages">
	<section id="html5">
	<h1>HTML5</h1>

	<p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C).[3] The previous version, HTML 4, was standardised in 1997.</p>
	<p>Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.</p>
	</section>
	<section id="css3">
	<h1>CSS3</h1>

	<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.</p>
	</section>
	<section id="bootstrap">
	<h1>Bootstrap</h1>

	<p>Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. The bootstrap framework aims to ease web development.</p>
	<p>Bootstrap is a front end, that is an interface between the user and the server-side code which resides on the "back end" or server. And it is a web application framework, that is a software framework which is designed to support the development of dynamic websites and web applications.</p>
	</section>
	</div>
	</body>
	</html>
	$(document).scroll(function () {

	//get current section
	var $currentPage = $('.pages > section:onScreen').first();
	var $title = $('.pages > section:onScreen').first().find('h1').first();

	//update url
	if (history && history.pushState && location.protocol !== "file:") {
	history.pushState({}, $title.text(), "/#"+$currentPage.attr('id'));
	} else{
	location.hash = $currentPage.attr('id');
	}
	});
	// onScreen jQuery plugin v0.2.1
	// (c) 2011-2013 Ben Pickles
	//
	// http://benpickles.github.io/onScreen
	//
	// Released under MIT license.
	;(function($) {
	$.expr[":"].onScreen = function(elem) {
	var $window = $(window)
	var viewport_top = $window.scrollTop()
	var viewport_height = $window.height()
	var viewport_bottom = viewport_top + viewport_height
	var $elem = $(elem)
	var top = $elem.offset().top
	var height = $elem.height()
	var bottom = top + height

	return (top >= viewport_top && top < viewport_bottom) \|\|
	(bottom > viewport_top && bottom <= viewport_bottom) \|\|
	(height > viewport_height && top <= viewport_top && bottom >= viewport_bottom)
	}
	})(jQuery);
	html,
	body {
	margin: 0;
	padding: 0;
	height: 101%;
	width: 100%;
	}
	*,
	*:before,
	*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	.pages {
	display: inline-block;
	width: 100%;
	height: 100%;
	}
	.pages > section {
	display: inline-block;
	min-height: 100%;
	padding: 10px;
	font-family: Georgia;
	}
	.pages > section:nth-child(even) {
	background-color: #000;
	color: #fff;
	}