<div class="container">
  <div class="mystickyheader">
    <ul class="nav">
      <li><a href="#anchorone">Section One</a></li>
     <li> <a href="#anchortwo">Section Two</a></li>
      <li><a href="#anchorthree">Section Three</a></li>
    </ul>
  </div>
  <div class="section" id="anchorone">
    <h3>Section One</h3>
    <p>Some some some content here</p>
   </div>
  <div class="section" id="anchortwo">
    <h3>Section Two</h3>
    <p>Some some some content here</p>
  </div>
    <div class="section" id="anchorthree">
    <h3>Section Three</h3>
    <p>Some some some content here</p>
  </div>
</div>

.container {
  max-width:500px;
  margin:0 auto;
}
.mystickyheader {
  position: -webkit-sticky;
	position: sticky;
	top: 0;
  background:#3f51b5;
  color:#ffffff;
  margin:0;
  padding:0.1rem 1rem;
}
.mystickyheader nav {
  list-style: none;
	padding: 0;
  margin:0;
}
.mystickyheader ul {
  list-style: none;
	padding: 0;
}
.mystickyheader ul li {
  display:inline-block;
  margin-right:0.5rem;
}
.mystickyheader ul li a{
  color:#ffffff;
}

/**Anchor sections*/
.section {
  color:#000;
   background: #9c27b0;
   height:85vh;
   margin:0;
   scroll-margin-top : 4em;
}
.section h3{
  margin:0;
}
.section:nth-child(2) {
   background: #009688;
}
.section:nth-child(3) {
   background: #cddc39;
}