Example of using a fixed header with anchors:

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        background-color: lightgreen;
        width: 700px;
      }
      .main {
        height: 300px;
        overflow: hidden;
        overflow-y: scroll;
      }
      header {
        position: fixed;
        width: 700px;
        z-index: 1;
        background-color: green;
      }
      header a {
        display: inline-block;
        padding: 20px 30px;
        color: #ffffff;
        text-decoration: none;
      }
      .content {
        margin-top: 90px;
      }
      .anchor {
        display: inline-block;
      }
      h1 {
        padding-left: 20px;
      }
      p {
        padding: 0 20px 20px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <header>
        <a href="/learn-html.html">Learn HTML</a>
        <a href="/learn-git.html">Learn GIT</a>
      </header>
      <div class="content">
        <h1>
          <a class="anchor" name="name">Header</a>
        </h1>
        <p>
          In the HTML Basics section, you will have a full understanding of Editors and Tools that you need when working on building web pages. It will inform you about the professional editors that web developers use for coding. Elements are the fundamentals of HTML. Each HTML document is made of elements, which are defined using tags. HTML Elements teaches you the types of HTML elements. It also highlights the difference between HTML tags and HTML elements that are often confused.
        </p>
        <p>
          HTML Basic Tags are used to structure website content (text, hyperlinks, images, media, etc). Tags only "instruct" browsers how to show the content of the web page. HTML Tags chapter suggests the most frequently used tags in HTML with their examples.
        </p>
        <p>
          HTML Attributes are added to an HTML element to provide additional information about it. Book suggests lots of examples and the list of the most used attributes.
        </p>
      </div>
    </div>
  </body>
</html>