HTML Anchors Navigation Not Working With CSS Sticky Stack-CodePudding

I'm building a website where there is a navbar on the top and then as I navigate down on the page there are section titles being stacked as sticky below the navbar. What I've noticed is that when the "top" CSS tag is used in an element, the HTML anchors get broken.

I've coded the example in this jsfiddle. When the page is loaded, you can navigate through the top navbar to ID1, ID2, ID3 and ID4. The problem is that for instance when you get to ID2, you can't get back to ID1, or get from ID3 to ID1 or ID2. Basically you can't use the anchors of any stacked sticky element that uses the "top" CSS tag which located higher on the page.

This doesn't makes sense to me. Any ideas of why this is and any ideas on how to workaround?

Thanks in advance to all the responses.

Code example:

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .topnav {
      background-color: #f1f1f1;
      position: sticky;
      top: 0;
      width: 100%;
      z-index: 99;
      border: #f1f1f1;
}
    .stickytitle{
      list-style-type: none;
      float: left;
      margin: 0;
      width: 100%;
      overflow: hidden;
      background-color: seagreen;
      position: sticky;
      top: 20px;
      border-radius: 0px;
      font-size: 18px;
      font-weight: bold;
      color: #eee;
      z-index: 98;
    }
  </style>
</head>

<div >
  <a href="#">Home</a>
  <a href="#id1">ID1</a>
  <a href="#id2">ID2</a>
  <a href="#id3">ID3</a>
  <a href="#id4">ID4</a>
</div> 

<h1  id="id1">ID1</h1>
<p>TO TEST INSERT LONG TEXT HERE OR CHECK THE JSFIDDLE REFERRED ABOVE</p>
<h1  id="id2">ID2</h1>
<p>TO TEST INSERT LONG TEXT HERE OR CHECK THE JSFIDDLE REFERRED ABOVE</p>
<h1  id="id3">ID3</h1>
<p>TO TEST INSERT LONG TEXT HERE OR CHECK THE JSFIDDLE REFERRED ABOVE</p>
<h1  id="id4">ID4</h1>
<p>TO TEST INSERT LONG TEXT HERE OR CHECK THE JSFIDDLE REFERRED ABOVE</p>

</html>

CodePudding user response：

As @CBroe pointed out, you need to create sections/wrappers that do not become sticky.

section {
  min-height: 50vh;
}
.topnav {
  background-color: #f1f1f1;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 99;
  border: #f1f1f1;
}
.stickytitle{
  list-style-type: none;
  float: left;
  margin: 0;
  width: 100%;
  overflow: hidden;
  background-color: seagreen;
  position: sticky;
  top: 20px;
  border-radius: 0px;
  font-size: 18px;
  font-weight: bold;
  color: #eee;
  z-index: 98;
}

<div >
  <a href="#">Home</a>
  <a href="#id1">ID1</a>
  <a href="#id2">ID2</a>
  <a href="#id3">ID3</a>
  <a href="#id4">ID4</a>
</div> 

<section id="id1">
  <h1 >ID1</h1>
  <p>TO TEST INSERT LONG TEXT HERE OR CHECK THE JSFIDDLE REFERRED ABOVE</p>
</section>
<section id="id2">
  <h1 >ID2</h1>
  <p>TO TEST INSERT LONG TEXT HERE OR CHECK THE JSFIDDLE REFERRED ABOVE</p>
</section>
<section id="id3">
  <h1 >ID3</h1>
  <p>TO TEST INSERT LONG TEXT HERE OR CHECK THE JSFIDDLE REFERRED ABOVE</p>
</section>
<section id="id4">
  <h1 >ID4</h1>
  <p>TO TEST INSERT LONG TEXT HERE OR CHECK THE JSFIDDLE REFERRED ABOVE</p>
</section>