Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

JavaScript Videos

Scroll Programming

Peekaboo Box Tutorial Scroll Bottom CSS Transition AnimationParallax Scroll Effects Tutorial Animation ProgrammingMagic Header Scroll Page TutorialScroll Load Dynamic Content When User Reach Bottom AjaxSmooth Auto Scroll Tutorial