Sticky Navigation

index.html

<header id="header"></header>
<nav id="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<main id="container"></main>

script.js

$(document).ready(function () {
  var $nav = $('#navigation'),
      posTop = $nav.position().top;
  $(window).scroll(function () {
    var y = $(this).scrollTop();
    if (y > posTop) { $nav.addClass('fixed'); }
    else { $nav.removeClass('fixed'); }
  });
});

Sticky-Navigation.markdown

Sticky Navigation

I really like fixed navigations. Sorry.

A Pen by White Wolf Wizard on CodePen.

License.

style.scss

$color-base: #fff;
$color-accent: #8aba56;

body {
  background-color: #666;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/14104/stardust.png);
  background-blend-mode: hard-light;
  font-size: 10pt;
}
a {
  color: $color-accent;
  font-weight: 700;
  text-decoration: none;
}

// HEADER
#header {
  position: relative;
  width: 100%; height: 250px;
  background: $color-accent;
}
// NAVIGATION
#navigation {
  position: relative;
  width: 100%; height: 50px;
  background: $color-base;
  box-shadow: 0 0 5px rgba(#000, 0.15);
  text-align: center;
  line-height: 50px;
  ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    li {
      a {
        height: inherit;
        padding: 0 25px;
        display: inline-block;
        transition: all 150ms ease;
        line-height: inherit;
        text-transform: uppercase;
        &:hover {
          background: $color-accent;
          color: $color-base;
        }
      }
    }
  }
  &.fixed {
    position: fixed;
    top: 0; left: 0; right: 0;
  }
}
// CONTAINER
#container { min-height: 300%; }