<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detect Scroll Up and Down</title>
<style>
body {
margin:0px;
}
table td {
border:1px #DDD solid;
}
#mainmenu {
position:fixed;
top:-80px; width:100%; height:55px;
z-index:2;
background-color:#FAFAFA;
transition:top 1s linear, opacity 0s linear;
border-bottom: 1px solid #999;
box-shadow: 0 20px 20px -20px #AAA;
}
</style>
<script>
function showMiniMenu() // show the fixed menu
{
document.getElementById("mainmenu").style.top = "0px";
}
function hideMiniMenu() // disapear the fixed menu
{
topm = document.getElementById("mainmenu").style
// topm.zIndex = "-1";
// topm.opacity = "0";
topm.top = "-80px";
// topm.zIndex = "2";
// setTimeout(function () {topm.opacity = "1";}, 1000);
}
</script>
</head>
<body>
<div>
<table style="width: 100%;background-color :#F2F2F2;">
<tr>
<td>The basic menu</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>Basic menu</td>
</tr>
</table>
</div>
<div id="mainmenu">
<table style="width: 100%">
<tr>
<td>The mini menu</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div align="center">
First line.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
</div>
<script>
oldScrollY = -1;
window.onscroll = function(e) {
document.title = window.scrollY;
if(oldScrollY < window.scrollY) {
// document.title = " Down";
if (window.scrollY > 60) showMiniMenu();
} else {
// document.title = " Up";
if (window.scrollY < 20) hideMiniMenu();
}
oldScrollY = window.scrollY;
// console.log(window.scrollY);
}
</script>
</body>
</html>