<!DOCTYPE html>
<html>
<head>
<title>TK Slide effect</title>
<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