HTML


<div id="wrapper">
	<header id="top-header">
		<div class="container clearfix">
			<img id="logo" src="http://flyfishing.webbeloz.it/assets/sites/2/play.svg">
			<nav>
				<a href="#">A</a>
				<a href="#">B</a>
				<a href="#">C</a>
			</nav>
		</div>
	</header>
</div>



CSS


/**
** SVG Logo onScroll animate resizing
** _dev @webbeloz
** to getGRAV / Themes & Styling
*/
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	transition: all 0.8s;
}
body {
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.8;
}
header.smaller {
	height: 65px;
}
img#logo {
	height: 150px;
	margin: 0.355rem;
}
header.smaller img#logo {
	height: 55px;
}
header.smaller nav a {
	line-height: 65px;
}
a {
	text-decoration: none;
	color: #eee;
	font-weight: 300;
}
#wrapper {
	width: 100%;
	margin: 0 auto;
	min-height: 2600px
}
.container {
	width: 80%;
	margin: 0 auto;
	padding: 0 30px;
}
header {
	width: 100%;
	height: 10rem;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: teal;
}
header nav {
	display: inline-block;
	float: right;
}
header nav a {
	line-height: 150px;
	margin-left: 20px;
	color: #fcfcfc;
	font-weight: 300;
	font-size: 1em;
}
header nav a:hover {
	color: #fd5559;
}
header.smaller {
	height: 65px;
}
header.smaller nav a {
	line-height: 65px;
}
.clearfix:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}



JS


// sample!
function resizeHeaderOnScroll() {
	const distanceY = window.pageYOffset || document.documentElement.scrollTop,
				shrinkOn = 100,
				headerEl = document.getElementById('top-header');
	
	if (distanceY > shrinkOn) {
    headerEl.classList.add("smaller");
  } else {
    headerEl.classList.remove("smaller");
  }
}
window.addEventListener('scroll', resizeHeaderOnScroll);




CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now