Prototype using jQuery
Here is one way you might do this.
Suppose this your HTML, fixed header and some content:
Your CSS might be:
.header {
position: fixed;
top: 0px;
left: 9px;
right: 9px;
height: 50px;
border: 1px dotted blue;
background-color: rgba(125, 125, 125, 0.5);
}
.main {
margin-top: 60px;
border: 1px solid blue;
width: 25%;
}
The jQuery to make this happen is as follows:
$(window).scroll(
{
previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
if (currentTop < this.previousTop) {
$(".sidebar em").text("Up"); /* optional for demo */
$(".header").show();
} else {
$(".sidebar em").text("Down");
$(".header").hide();
}
this.previousTop = currentTop;
});
Demo fiddle: http://jsfiddle.net/audetwebdesign/Mar62/
How This Works
The trick is to compute whether your are scrolling up or scrolling down. You can do this by storing the previous value of the .scrollTop position.
Define an anonymous JavaScript object with a single member to store the value:
{
previousTop: 0
}
and pass that object to the jQuery .scroll() function.
When the window scrolls, get the current top position of the window scroll bar,
then compare it to the previous value, and then either show the header if
scrolling up or hide it if scrolling down.
After the show/hide decision, update the .previoustop with the currentTop value.
No other plug in required. You can fade in/out the header or use some other animation instead of a simple show/hide.
