Untitled

<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 {

  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 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');

      }

    };