<div class="bg" id="1">
<div class="cloud" id="1"></div>
</div>
<div class="bg" id="2">
<div class="cloud" id=></div>
</div>
<div class="bg" id="3">
<div class="cloud" id="3"></div>
</div>
<div class="filler">
<!-- Bars -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="header">
<div class="button" id="home">
<div class="button-text">please</div>
</div>
<div class="button" id="about">
<div class="button-text">scroll</div>
</div>
<div class="button" id="contact">
<div class="button-text">down</div>
</div>
<div class="header-shadow"></div>
</div>
<div class="footer">
<div class="footer-text">end.</div>
</div>
* {
box-sizing: border-box;
}
body {
margin: auto;
font-family: "Lucida Sans Unicode";
}
.filler {
background-color: Teal;
width: 100%;
height: 3000px;
}
.filler > div {
height: 200px;
width: 70%;
background-color: CadetBlue;
margin: auto;
margin-bottom: 165px;
}
.filler > div:last-child {
margin-bottom: 0;
}
.bg {
position: fixed;
opacity: 0.8;
height: 3000px;
width: 1000px;
left: 50%;
margin-left: -500px;
}
.bg[id="1"] {
z-index: 1;
//border: 1px solid LightGrey;
}
.bg[id="2"] {
z-index: 2;
//border: 2px solid DimGrey;
}
.bg[id="3"] {
z-index: 3;
//border: 3px solid Black;
}
.cloud {
position: absolute;
height: 250px;
width: 500px;
}
.bg[id="1"] .cloud {
background-color: Black;
left: 250px;
top: 500px;
height: 250px;
width: 30%;
}
.bg[id="2"] .cloud {
background-color: DimGrey;
left: 300px;
top: 800px;
height: 300px;
width: 40%;
}
.bg[id="3"] .cloud {
background-color: LightGrey;
left: 350px;
top: 1100px;
height: 350px;
width: 50%;
}
.header {
width: 100%;
height: 80px;
z-index: 4;
position: fixed;
top: 100vh;
margin-top: -80px;
}
.header-shadow {
position: relative;
top: 10px;
background-color: black;
opacity: 0.7;
height: 100%;
width: 100%;
z-index: -1;
}
.header .button {
width: 33.33%;
height: 100%;
display: inline;
float: left;
text-align: center;
background-color: LimeGreen;
}
.button .button-text {
color: white;
display: inline;
position: absolute;
top: 40px;
margin-top: -0.5em;
}
.button:hover {
background-color: LightGreen;
cursor: pointer;
}
.footer {
height: 80px;
width: 100%;
background-color: LimeGreen;
text-align: center;
color: White;
}
.footer .footer-text {
position: relative;
top: 40px;
margin-top: -0.5em;
}
$(document).ready(function() {
var $header = $(".header");
$(window).bind('scroll', function(e) {
parallaxScroll();
var scrollAmt = $(window).scrollTop();
if (scrollAmt > $(window).height() - $header.height()) {
fixHeaderToTop();
} else {
letHeaderScroll();
}
});
var letHeaderScroll = function() {
$header.css('position', 'absolute');
$header.css('top', $(window).height() + 'px');
$header.css('margin-top', '-80px');
}
var fixHeaderToTop = function() {
$header.css('position', 'fixed');
$header.css('top', '0');
$header.css('margin-top', '0');
}
/*
Parallax scroll function taken from Jonathan Nicol @ http://jonathannicol.com/blog/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css/
*/
function parallaxScroll() {
var scrolled = $(window).scrollTop();
$('.bg[id="1"]').css('top', (0 - (scrolled * .25)) + 'px');
$('.bg[id="2"]').css('top', (0 - (scrolled * .5)) + 'px');
$('.bg[id="3"]').css('top', (0 - (scrolled * .75)) + 'px');
}
});
This Pen doesn't use any external CSS resources.