Sticky navigation

global.css

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 250px;
}
header {
  padding-top: 50px;
  height: 300px;
  background: #f07057;
}
.main-nav,
.main {
  position: relative; 
}
.main-nav {
  z-index: 150;
  margin-bottom: -80px;
  height: 80px;
  background: #fff;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
header,
.main-nav-scrolled {
  position: fixed;
  top: 0;
  width: 100%;
}
.main {
  padding: 110px 50px 50px;
  background: #f2f2e8;
  column-count: 2;
  column-gap: 40px;
}

index.htm

<header>
  <h1>This is a Sticky Nav Demo!</h1>
  <p>Creating one of these isn't so bad. Let's learn how with this sweet little demo!</p>
</header>
<nav class="main-nav">
  <a href="#">Nav Link 1</a>
  <a href="#">Nav Link 2</a>
  <a href="#">Nav Link 3</a>
  <a href="#">Nav Link 4</a>
</nav>
<div class="main">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Consectetur adipiscing elit. Donec augue justo, pretium id pretium at, sagittis sit amet eros. In hac habitasse platea dictumst. Cras ac congue tortor. Mauris placerat, erat eu iaculis fermentum, urna sapien feugiat tortor, pharetra convallis nulla sem id orci. Curabitur et molestie purus, et laoreet nibh. Fusce ac nunc eleifend, luctus sem quis, congue nisl. Quisque vitae commodo leo, a accumsan nisl. Suspendisse ac fermentum odio. Cras egestas nunc nec elementum fringilla. Praesent non sapien aliquam, feugiat dui quis, commodo orci. In ac diam scelerisque, tristique odio a, tincidunt mas.</p>
  <p>Fusce in urna erat. Vivamus non placerat libero, hendrerit dignissim quam. In et accumsan dui. Sed tincidunt convallis nunc. Nunc tristique neque enim, at porta eros sollicitudin gravida. Sed ut ante et tortor convallis lobortis vitae mattis dui. Cras a fringilla arcu, at congue odio. Aliquam scelerisque dictum tincidunt. Integer semper mauris nunc, ac pharetra nunc molestie quis. Fusce viverra ipsum eget convallis rhoncus. Ut et odio at eros bibendum finibus ut non nisi.</p>
  <p>Donec at magna ut tellus sodales pretium. Aliquam varius tellus quis justo tincidunt ultrices. Nullam pharetra ante vitae turpis venenatis fermentum. Praesent eu magna eu purus volutpat blandit. In hac habitasse platea dictumst. Praesent id urna sed nibh volutpat consectetur. Aenean sollicitudin efficitur bibendum. Aliquam nec ex vitae orci placerat scelerisque eu in dolor. In viverra tellus eget felis lacinia dignissim. Maecenas non sagittis mauris. Integer facilisis et lectus a condimentum. Nullam nec ultricies ipsum. Etiam ut convallis enim, nec tempor sem. Donec sollicitudin et lectus quis consectetur. Phasellus a nunc ut lorem imperdiet fermentum.</p>
  <p>Duis dignissim sodales lacus, vitae ullamcorper nulla scelerisque vitae. Etiam ac faucibus sapien. Curabitur lacus mauris, facilisis ut eleifend eu, maximus ac massa. Donec in ultrices sem. Nulla eget porta metus. Cras sed justo ut nisl elementum ornare quis vel quam. Ut tempus posuere enim, non molestie dui convallis vel. Morbi ac leo ultrices, luctus massa vitae, egestas dui. Cras ullamcorper turpis vestibulum purus pellentesque, et suscipit turpis aliquet. Proin tempus a metus at elementum. Etiam at mi at urna placerat vulputate. Nunc diam arcu, vehicula vitae placerat id, tincidunt eget nibh. Maecenas vitae accumsan massa, sed sollicitudin nibh. Fusce sodales elit a sem venenatis, ac faucibus leo interdum. Cras ut est id nisi tristique aliquam. Praesent tempus lacinia arcu, in placerat sem vestibulum a.</p>
  <p>Sed mollis nunc quis tincidunt vulputate. Aenean vestibulum est id cursus commodo. Nam et mi vulputate, lacinia tortor vel, rutrum eros. Etiam at libero vel tortor euismod tristique ac ut mauris. Donec porta ante erat, sed mattis ante congue in. Donec fermentum risus dui, sed lobortis ante sagittis eu. Fusce eu pellentesque nulla, eget pellentesque enim. Vivamus scelerisque bibendum feugiat.</p>
  <p>Aliquam vitae purus sit amet lorem pellentesque bibendum non a neque. Praesent sagittis imperdiet enim, ac aliquam erat tempor sit amet. Quisque blandit arcu ut laoreet sodales. Nullam eu varius ante. Sed molestie libero lorem, vitae egestas odio fermentum id. Proin sed convallis lectus. Maecenas facilisis vitae quam a euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat augue vel aliquet convallis. Fusce nec dictum ligula. Mauris fermentum ligula vel tempus ultricies.</p>
</div>