Skip to content

Instantly share code, notes, and snippets.

@z-------------

z-------------/afh.js

Created May 29, 2014 14:50
Show Gist options
  • Save z-------------/1933657e233e70d31d28 to your computer and use it in GitHub Desktop.
Save z-------------/1933657e233e70d31d28 to your computer and use it in GitHub Desktop.
Download ZIP
Awesome Floating Header - hide the header when scrolling down, show when scrolling up.
Raw
afh.js
var header = document.querySelector("header");
var headerHeight = header.offsetHeight;
var oldScroll = 0;
function hideHeader() {
header.style.top = -headerHeight + "px";
}
function showHeader() {
header.style.top = "0";
}
window.addEventListener("scroll",function(){
if (window.scrollY < oldScroll) {
showHeader();
} else {
hideHeader();
}
oldScroll = window.scrollY;
})
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Awesome floating header</title>
<style>
*,*:before,*:after {
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
html,body {
margin:0;
}
body {
padding:50px;
padding-top:70px;
}
header {
position:fixed;
background:linear-gradient(#555,#333);
color:white;
top:0;
left:0;
width:100%;
text-align:center;
transition:.3s;
}
h1 {
margin:10px;
font-weight:100;
}
section {
margin-bottom:50px;
line-height:1.5;
}
section p {
text-align:justify;
}
</style>
</head>
<body>
<header>
<h1>Awesome Floating Header</h1>
</header>
<section>
<h2>Here's a header</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim,
ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis,
pulvinar a semper sed, adipiscing id dolor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim,
ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis,
pulvinar a semper sed, adipiscing id dolor.
</p>
<p>
Pellentesque auctor nisi id magna consequat sagittis.
Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero
in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu
rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum
accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
</p>
</section>
<section>
<h2>And here's another</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim,
ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis,
pulvinar a semper sed, adipiscing id dolor.
</p>
<p>
Pellentesque auctor nisi id magna consequat sagittis.
Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero
in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu
rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum
accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
</p>
</section>
<section>
<h2>Here's a header</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim,
ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis,
pulvinar a semper sed, adipiscing id dolor.
</p>
<p>
Pellentesque auctor nisi id magna consequat sagittis.
Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero
in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu
rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum
accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
</p>
</section>
<section>
<h2>And here's another</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim,
ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis,
pulvinar a semper sed, adipiscing id dolor.
</p>
<p>
Pellentesque auctor nisi id magna consequat sagittis.
Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero
in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu
rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum
accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
</p>
</section>
<section>
<h2>Here's a header</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim,
ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis,
pulvinar a semper sed, adipiscing id dolor.
</p>
<p>
Pellentesque auctor nisi id magna consequat sagittis.
Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero
in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu
rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum
accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
</p>
</section>
<section>
<h2>And here's another</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim,
ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis,
pulvinar a semper sed, adipiscing id dolor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.
Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim,
ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis,
pulvinar a semper sed, adipiscing id dolor.
</p>
<p>
Pellentesque auctor nisi id magna consequat sagittis.
Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero
in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu
rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum
accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
</p>
</section>
<script src="afh.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment