A Pen by Larry Geams Parangan.
body{
margin: 0px;
padding: 0px;
font-family: 'Lato',sans-serif;
}
h1{
margin: 0px;
padding: 0px;
font-weight: 300;
float: left;
}
#header{
color: #fff;
background: #34495e;
width: 100%;
height: 70px;
padding: 10px;
position: fixed;
top: -500px;
}
.box-sizing{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.section{
padding: 50px;
color: #fff;
line-height: 30px;
font-size: 25px;
font-weight: 300;
}
.sect-1{
background: #3498db;
}
.sect-2{
background: #fff;
color: #3498db
}
/*font-face*/
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
$(function() {
var head = $('#header')
var top = head.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 80) {
head.stop().animate({'top' : '0px'}, 500);
} else {
head.stop().animate({'top' : top}, 500);
}
});
});
/* Picksum Ipsum for the content
http://www.picksumipsum.co.uk/ */<!--Made with Love by Larry Geams-->
<header id="header" class="box-sizing">
<h1>Headr</h1>
</header>
<section class="section sect-1 box-sizing">
Good Morning, oh in case I don't see you, good afternoon, good evening and goodnight. Alrighty Then Excuse me, I'd like to ASS you a few questions. Brain freeze. I just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. We're going for a ride on the information super highway. Look ma i'm road kill Here she comes to wreck the day. Good Morning, oh in case I don't see you, good afternoon, good evening and goodnight. We got no food we got no money and our pets heads are falling off! Haaaaaaarry. Your entrance was good, his was better. Look ma i'm road kill
</section>
<section class="section sect-2 box-sizing">
Here she comes to wreck the day. Excuse me, I'd like to ASS you a few questions. Your entrance was good, his was better. Alrighty Then Alrighty Then Kinda hot in these rhinos. Look ma i'm road kill Kinda hot in these rhinos. Kinda hot in these rhinos. We got no food we got no money and our pets heads are falling off! Haaaaaaarry. We're going for a ride on the information super highway. Good Morning, oh in case I don't see you, good afternoon, good evening and goodnight.
</section>
<section class="section sect-1 box-sizing">
Excuse me, I'd like to ASS you a few questions. I just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. It's because i'm green isn't it! Look at that, it's exactly three seconds before I honk your nose and pull your underwear over your head. We're going for a ride on the information super highway. It's because i'm green isn't it! Brain freeze. Here she comes to wreck the day. Look at that, it's exactly three seconds before I honk your nose and pull your underwear over your head. Hey, maybe I will give you a call sometime. Your number still 911? Look at that, it's exactly three seconds before I honk your nose and pull your underwear over your head. Brain freeze.
</section>
<section class="section sect-2 box-sizing">
We got no food we got no money and our pets heads are falling off! Haaaaaaarry. It's because i'm green isn't it! Your entrance was good, his was better. Hey, maybe I will give you a call sometime. Your number still 911? I just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. Hey, maybe I will give you a call sometime. Your number still 911?
</section>Animate your website's header when scrolled down using Javascript and JQuery
A Pen by Larry Geams Parangan on CodePen.