Check out example codes for "anchor links scrolling too far". It will help you in understanding the concepts better.

Code Example 1

<!-- content to be placed inside <body>…</body> -->
<ul>
  <li><a href="#s1">link 1</a>
  <li><a href="#s2">link 2</a>
  <li><a href="#s3">link 3</a>
  <li><a href="#s4">link 4</a>
</ul>
<div id="s1" class="first">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
<div id="s4">4</div>

Code Example 2

div{ 
  height: 650px; 
  background:#ccc; 
  /*the magic happens here*/
  border-top:42px solid #fff;
}
ul{
  top: 0; 
  width: 100%; 
  height:20px; 
  position: fixed; 
  background: deeppink; 
  margin:0;
  padding:10px; 
}
li{
  float:left;
  list-style:none;
  padding-left:10px;
}
div:first-of-type{ 
  margin-top:0; 
}

Learn ReactJs, React Native from akashmittal.com