⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Magic Header Scroll Page Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
Learn to program a document header that magically changes as the user scrolls down the page. When the user scrolls back to the top of the page we will make the header change back to its original display settings. 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{ margin: 0px; text-align: center; }
#pagetop{
	position: fixed;
	top: 0px;
	width:100%;
	height: 120px;
	background: #06C;
	color: #FFF;
	font-size: 23px;
	padding-top: 50px;
	transition: height 0.3s linear 0s, padding 0.3s linear 0s;
	overflow:hidden;
}
#pagetop > #menu{
	position: absolute;
	bottom: 0px;
	width:100%;
	background: #004A95;
	height: 50px;
	transition: height 0.3s linear 0s;
}
#wrapper{ margin-top: 230px; }
</style>
<script>
var pagetop, menu, yPos;
function yScroll(){
	pagetop = document.getElementById('pagetop');
	menu = document.getElementById('menu');
	yPos = window.pageYOffset;
	if(yPos > 150){
		pagetop.style.height = "36px";
		pagetop.style.paddingTop = "8px";
		menu.style.height = "0px";
	} else {
		pagetop.style.height = "120px";
		pagetop.style.paddingTop = "50px";
		menu.style.height = "50px";
	}
}
window.addEventListener("scroll", yScroll);
</script>
</head>
<body>
<div id="pagetop">
  header
  <div id="menu">menu system</div>
</div>
<div id="wrapper">
<script> 
    for(var i = 0; i < 40; i++){ document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); }
</script>
</div>
</body>
</html>
▲