位置のずれたデモがこちら。
ヘッダーの高さ（64px）分、位置がずれてテキストが読めなくなっています。

See the Pen Link test01-1 by Yurie (@kkrg) on CodePen.

ずれを解消したものがこちら。
位置が調整されて、テキストがきちんと読めるようになりました！

ちなみに、これで解決しない場合はもうひとつ記事を書いているので、そちらも確認してみてくださいね。

See the Pen Link test01-2 by Yurie (@kkrg) on CodePen.

<header>header 64px</header>
<div class="linkbox">
  <a href="#link">Localnav</a>
</div>
<div class="contents" id="link">
  <p>contents</p>
</div>

header {
  background: #fff;
  color: #666;
  height: 64px;
  line-height: 64px;
  text-align: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.linkbox {
  background-image: linear-gradient(-45deg, #f2f2f2 25%, #e2e2e2 25%, #e2e2e2 50%, #f2f2f2 50%, #f2f2f2 75%, #e2e2e2 75%, #e2e2e2);
  background-size: 40px 40px;
  background-attachment: fixed;
  padding-top: 164px;
  height: 600px;
  text-align: center;
}

.linkbox a {
  background: #333;
  border-radius: 5px;
  color: #fff;
  padding: 20px 60px;
  text-decoration: none;
  letter-spacing: 1px;
  display: inline-block;
}

.contents {
  color: #666;
  height: 600px;
  font-size: 120px;
  text-align: center;
  /* 停止位置調整 */
  padding-top: 64px; /* 64px -> header高さ */
  margin-top: -64px; /* 64px -> header高さ */
}

CSSはたくさん書いていますが、重要なのは.contentsでコメントアウト（停止位置調整）を残している部分。上部に固定されているヘッダーの高さ分をpaddingとネガティブmarginで調整しています。