<div class="container -column">
  <nav class="-sticky">
    <a class="nav-item">Home</a>
    <a class="nav-item">About Us</a>
    <a class="nav-item">Contact Us</a>
  </nav>
  <div class="content">
    <p><strong>Currently works on Firefox, Safari and Chrome 56.</strong></p>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar egestas sapien a venenatis. Phasellus aliquet non sem vestibulum finibus. Fusce venenatis condimentum justo, non gravida sapien ornare vitae. Sed efficitur condimentum tincidunt. Quisque congue sagittis lectus, in pharetra tortor semper a. Ut tincidunt ornare sem, eget eleifend felis. Suspendisse urna est, pharetra convallis tellus id, tincidunt venenatis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam condimentum, ante id commodo accumsan, massa dolor hendrerit justo, in dapibus velit nisi sed tellus. In non tortor rhoncus, dapibus ante a, faucibus nisi.      
    </p>
    <h1>About Us</h1>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar egestas sapien a venenatis. Phasellus aliquet non sem vestibulum finibus. Fusce venenatis condimentum justo, non gravida sapien ornare vitae. Sed efficitur condimentum tincidunt. Quisque congue sagittis lectus, in pharetra tortor semper a. Ut tincidunt ornare sem, eget eleifend felis. Suspendisse urna est, pharetra convallis tellus id, tincidunt venenatis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam condimentum, ante id commodo accumsan, massa dolor hendrerit justo, in dapibus velit nisi sed tellus. In non tortor rhoncus, dapibus ante a, faucibus nisi.      
    </p>
    <h1>Contact Us</h1>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar egestas sapien a venenatis. Phasellus aliquet non sem vestibulum finibus. Fusce venenatis condimentum justo, non gravida sapien ornare vitae. Sed efficitur condimentum tincidunt. Quisque congue sagittis lectus, in pharetra tortor semper a. Ut tincidunt ornare sem, eget eleifend felis. Suspendisse urna est, pharetra convallis tellus id, tincidunt venenatis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam condimentum, ante id commodo accumsan, massa dolor hendrerit justo, in dapibus velit nisi sed tellus. In non tortor rhoncus, dapibus ante a, faucibus nisi.      
    </p>
  </div>
</div>
.-sticky {
  position: -webkit-sticky; // safari
  position: sticky;
  top: 12px; // will stick at this point
}

nav {
  width: 316px;
  height: 42px;
  background-color: #fff;
  border-radius: 21px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  padding: 0 32px;
  box-sizing: border-box;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  .nav-item {
    color: #505050;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.875em;
    line-height: 42px;
    font-weight: 700;
    transition: color 0.3s ease;
    cursor: pointer;
    &:hover {
      color: #44BF75;
    }
  }
}

.content {
  margin-top: 36px;
}

strong {
  color: #44BF75;
}

html, body {
  height: auto;
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
  2. https://codepen.io/gregh/pen/jyNrJW.css

External JavaScript

This Pen doesn't use any external JavaScript resources.