TryIt Editor v2.0 - Example of setting a sticky header

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 200%;
      }
      nav {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
      }
      .nav-selections {
        text-transform: uppercase;
        letter-spacing: 5px;
        font: 16px "lato", sans-serif;
        display: inline-block;
        text-decoration: none;
        color: #fff;
        padding: 20px;
        float: right;
        margin-left: 5px;
        transition: 1.5s;
      }
      .nav-selections:hover {
        transition: 1.5s;
        color: black;
      }
      ul {
        background-color: #9ba4e0;
        overflow: auto;
      }
      li {
        list-style-type: none;
      }
      li:first-child {
        margin-right: 35px;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul align="left">
        <li>
          <a href="#/contact" class="nav-selections">Contact</a>
        </li>
        <li>
          <a href="#/about" class="nav-selections">About</a>
        </li>
        <li>
          <a href="#/products" class="nav-selections">Books</a>
        </li>
        <li>
          <a href="#" class="nav-selections">Home</a>
        </li>
      </ul>
    </nav>
  </body>
</html>