<header id="header">
<header id="header">
<nav id="nav">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
</nav>
</header>
<div class="slogan">
<h2>This is a simple message.</h2>
</div>
<div class="info">
<h3>This is a title.</h3>
<p>This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph.</p>
<div class="actions">
<a href="#">Do Something</a>
</div>
</div>
<div class="slogan alt">
<h2>This is a simple message.</h2>
</div>
<div class="info">
<h3>This is a title.</h3>
<p>This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph.</p>
<div class="actions">
<a href="#">Do Something</a>
</div>
</div>
<div class="slogan ">
<h2>This is a simple message.</h2>
</div>
<div class="info">
<h3>This is a title.</h3>
<p>This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph.</p>
<div class="actions">
<a href="#">Do Something</a>
</div>
</div>
<div class="slogan">
<h2>This is a simple message.</h2>
</div>
<div class="info">
<h3>This is a title.</h3>
<p>This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph.</p>
<div class="actions">
<a href="#">Do Something</a>
</div>
</div>
<div class="slogan alt">
<h2>This is a simple message.</h2>
</div>
<div class="info">
<h3>This is a title.</h3>
<p>This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph. This will be a longer paragraph.</p>
<div class="actions">
<a href="#">Do Something</a>
</div>
</div>
body {
body {
margin: 0;
padding: 0;
font-family: Source Sans Pro, sans-serif;
}
header nav {
margin-top: 20px;
text-align: center;
background: black;
opacity:0.5;
color: white;
font-size: 1.25em;
position: absolute;
width: 100%;
}
header nav a {
color: inherit;
text-decoration: none;
display: inline-block;
padding: .5em 1em;
}
header nav a:hover {
color: red;
}
.slogan {
background-image: url('http://ga-students.github.io/FEWD_NYC_19/projects/startup_matchmaker/images/coworking.jpg');
background-position: center center;
background-attachment: fixed;
background-size: cover;
text-align: center;
}
.slogan.alt {
background-image: url('http://2.bp.blogspot.com/-3LROFHKu70o/UwdCZ4qvmkI/AAAAAAAAETw/MfjHOsgr8XI/s1600/IMG_7393.JPG');
}
.slogan h2 {
color: white;
font-weight: normal;
font-size: 3em;
padding: 2em 0;
margin: 0;
text-shadow: 0 0 10px black;
background: rgba(0,0,0,.2);
}
.info {
background: #900;
color: white;
padding: 3em 20%;
}
.actions {
text-align: center;
}
.actions a {
display: inline-block;
border: 2px solid white;
padding: .75em 1.5em;
color: white;
text-decoration: none;
text-transform: uppercase;
border-radius: 5px;
letter-spacing: .15em;
word-spacing: .25em;
font-weight: bold;
transition: all 0.3s;
}
.actions a:hover {
background:black;
}
.fixed{
position: fixed;
}
var avatarElem = document.getElementById('nav');
var avatarElem = document.getElementById('nav');
var avatarSourceBottom = avatarElem.getBoundingClientRect().bottom + window.pageYOffset;
window.onscroll = function() {
if (avatarElem.classList.contains('fixed') && window.pageYOffset < avatarSourceBottom) {
avatarElem.classList.remove('fixed');
} else if (window.pageYOffset > avatarSourceBottom) {
avatarElem.classList.add('fixed');
}
};