Magic Header Scroll Page Tutorial
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>