<div class="uk-cover-background uk-position-relative">
  <img class="uk-invisible" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/moon.jpg" alt="">
</div>

<header data-uk-sticky>
  <div class="uk-container uk-container-center">
    <nav class="uk-navbar">
      <ul class="uk-navbar-nav">
        <li class="uk-active">
          <a href="">Home</a>
        </li>
        <li>
          <a href="">About</a>
        </li>
        <li>
          <a href="">Services</a>
        </li>
        <li>
          <a href="">Portfolio</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<main>
  <div class="uk-container uk-container-center">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit posuere ipsum in bibendum. In egestas tempor lacus, rhoncus fringilla ante viverra ac. Fusce sagittis, tellus a faucibus molestie, enim magna ornare nunc, vel placerat orci purus
      vitae dolor. Phasellus eu rutrum enim, et aliquam enim. Quisque laoreet nulla vitae velit condimentum, eget maximus massa dignissim. Phasellus et volutpat leo. Aliquam aliquam purus at ligula ultricies, sit amet consequat ligula porttitor. Etiam
      facilisis mauris turpis, nec fermentum dui blandit sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam dapibus libero ut orci luctus congue. Nam a tellus turpis. Morbi sed pretium nibh, sed hendrerit
      tortor. Mauris vitae congue ante. Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui vitae, lobortis porttitor augue.
      Donec ut feugiat ipsum, eu accumsan dui. Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla, congue ut arcu a, viverra tincidunt
      leo. Maecenas sed nulla non tortor lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla.</p>
    <p>Aenean quis lectus eget lacus mollis interdum. Donec leo augue, fermentum ac mauris non, auctor ullamcorper libero. Sed id facilisis enim. Nullam sed lobortis mi. Morbi sit amet nibh eu libero tristique egestas nec non magna. Nullam sit amet dui nec
      libero laoreet rhoncus nec a mi. Vestibulum dictum ut ligula sit amet vehicula. Maecenas vitae elit euismod, tincidunt leo nec, luctus lacus.</p>
    <p>Nam id augue ut velit auctor consequat. Vivamus porttitor placerat imperdiet. Ut efficitur gravida risus, et finibus ipsum venenatis eget. Donec vestibulum sapien ac mauris rhoncus pellentesque. Ut ut tincidunt leo. Nulla lobortis finibus sodales.
      Integer lectus ante, mollis vitae mauris quis, facilisis congue diam.</p>
    <p>Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsan
      dui. Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla, congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla non tortor
      lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla.</p>
    <p>Etiam venenatis lectus et justo pharetra facilisis. Pellentesque sollicitudin sem ac diam egestas, nec varius felis luctus. Vestibulum ipsum nisi, lobortis a orci nec, fringilla dictum ex. Praesent vehicula purus id ligula placerat, eget vehicula
      elit rhoncus. Morbi aliquam quis tellus in egestas. Mauris consequat condimentum tortor, euismod porta purus consectetur eget. Quisque blandit id massa ac porta. Nulla a accumsan dui. Morbi ultrices dui mi, vitae dictum erat elementum dapibus. Fusce
      at urna massa. Donec felis orci, tempus et suscipit id, facilisis quis lorem. Curabitur quis enim eget velit hendrerit facilisis pulvinar eu mi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit posuere ipsum in bibendum. In egestas tempor lacus, rhoncus fringilla ante viverra ac. Fusce sagittis, tellus a faucibus molestie, enim magna ornare nunc, vel placerat orci purusvitae
      dolor. Phasellus eu rutrum enim, et aliquam enim. Quisque laoreet nulla vitae velit condimentum, eget maximus massa dignissim. Phasellus et volutpat leo. Aliquam aliquam purus at ligula ultricies, sit amet consequat ligula porttitor. Etiamfacilisis
      mauris turpis, nec fermentum dui blandit sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam dapibus libero ut orci luctus congue. Nam a tellus turpis. Morbi sed pretium nibh, sedhendrerit tortor.
      Mauris vitae congue ante.</p>
    <p>Aenean quis lectus eget lacus mollis interdum. Donec leo augue, fermentum ac mauris non, auctor ullamcorper libero. Sed id facilisis enim. Nullam sed lobortis mi. Morbi sit amet nibh eu libero tristique egestas nec non magna. Nullam sit amet duinec
      libero laoreet rhoncus nec a mi. Vestibulum dictum ut ligula sit amet vehicula. Maecenas vitae elit euismod, tincidunt leo nec, luctus lacus.</p>
    <p>Nam id augue ut velit auctor consequat. Vivamus porttitor placerat imperdiet. Ut efficitur gravida risus, et finibus ipsum venenatis eget. Donec vestibulum sapien ac mauris rhoncus pellentesque. Ut ut tincidunt leo. Nulla lobortis finibus sodales.Integer
      lectus ante, mollis vitae mauris quis, facilisis congue diam.</p>
    <p>Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsandui.
      Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla, congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla nontortor
      lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla. Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui
      vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsan dui. Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla,
      congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla non tortor lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla.</p>
    <p>Aenean quis lectus eget lacus mollis interdum. Donec leo augue, fermentum ac mauris non, auctor ullamcorper libero. Sed id facilisis enim. Nullam sed lobortis mi. Morbi sit amet nibh eu libero tristique egestas nec non magna. Nullam sit amet duinec
      libero laoreet rhoncus nec a mi. Vestibulum dictum ut ligula sit amet vehicula. Maecenas vitae elit euismod, tincidunt leo nec, luctus lacus.</p>
    <p>Nam id augue ut velit auctor consequat. Vivamus porttitor placerat imperdiet. Ut efficitur gravida risus, et finibus ipsum venenatis eget. Donec vestibulum sapien ac mauris rhoncus pellentesque. Ut ut tincidunt leo. Nulla lobortis finibus sodales.Integer
      lectus ante, mollis vitae mauris quis, facilisis congue diam.</p>
    <p>Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsandui.
      Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla, congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla nontortor
      lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla. Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui
      vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsan dui. Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla,
      congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla non tortor lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla.</p>
    <p>Aenean quis lectus eget lacus mollis interdum. Donec leo augue, fermentum ac mauris non, auctor ullamcorper libero. Sed id facilisis enim. Nullam sed lobortis mi. Morbi sit amet nibh eu libero tristique egestas nec non magna. Nullam sit amet duinec
      libero laoreet rhoncus nec a mi. Vestibulum dictum ut ligula sit amet vehicula. Maecenas vitae elit euismod, tincidunt leo nec, luctus lacus.</p>
    <p>Nam id augue ut velit auctor consequat. Vivamus porttitor placerat imperdiet. Ut efficitur gravida risus, et finibus ipsum venenatis eget. Donec vestibulum sapien ac mauris rhoncus pellentesque. Ut ut tincidunt leo. Nulla lobortis finibus sodales.Integer
      lectus ante, mollis vitae mauris quis, facilisis congue diam.</p>
    <p>Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsandui.
      Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla, congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla nontortor
      lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla. Etiam ac enim et erat suscipit malesuada dictum at lectus. Suspendisse potenti. Duis bibendum congue arcu, sit amet condimentum ex porttitor ut. Donec magna erat, malesuada eu dui
      vitae, lobortis porttitor augue. Donec ut feugiat ipsum, eu accumsan dui. Vestibulum pretium luctus ante in rutrum. In rutrum scelerisque nisl, suscipit volutpat dolor feugiat ut. Aenean quis molestie tellus. Suspendisse potenti. Donec lacus nulla,
      congue ut arcu a, viverra tincidunt leo. Maecenas sed nulla non tortor lobortis aliquam. Aenean auctor tincidunt lorem, a semper ex pla.</p>
  </div>
</main>
div.uk-cover-background {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/moon.jpg);
}

header {
  background: #333;
}

.uk-navbar {
  background: transparent;
}

.uk-navbar-nav > li > a {
  color: #fff;
}

main {
  margin-top: 20px;
}
// Image from New Old Stock
// http://nos.twnsnd.co/post/149655436306/full-moon-over-the-alps-stefano-de-rosa

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/uikit.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/components/sticky.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/js/uikit.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/js/components/sticky.min.js