Saturday, 6 September 2014

Java - Slide effects applied to website header


<!DOCTYPE html>
 <html>
 <head>

<title>TK Slide effect</title> 
<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>

No comments:

Post a Comment