<div class="container">
  <ul id="ancore_menu"></ul>
  <div class="wrapper">
    <h2>Title 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus in ornare quam viverra orci sagittis eu. Consectetur purus ut faucibus pulvinar elementum. Faucibus in ornare quam viverra. Quam quisque id diam vel quam elementum. Enim diam vulputate ut pharetra sit amet aliquam. Sed risus pretium quam vulputate dignissim. Eget nullam non nisi est sit. Dolor sit amet consectetur adipiscing elit. Donec ultrices tincidunt arcu non sodales neque sodales ut. At varius vel pharetra vel turpis. Id neque aliquam vestibulum morbi blandit cursus risus at. Morbi non arcu risus quis varius quam quisque. Quisque id diam vel quam elementum pulvinar. Vel risus commodo viverra maecenas. Eu facilisis sed odio morbi. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Auctor elit sed vulputate mi sit amet mauris commodo quis. Elementum eu facilisis sed odio morbi quis. Quisque sagittis purus sit amet volutpat.</p>
    <h2>Title 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus in ornare quam viverra orci sagittis eu. Consectetur purus ut faucibus pulvinar elementum. Faucibus in ornare quam viverra. Quam quisque id diam vel quam elementum. Enim diam vulputate ut pharetra sit amet aliquam. Sed risus pretium quam vulputate dignissim. Eget nullam non nisi est sit. Dolor sit amet consectetur adipiscing elit. Donec ultrices tincidunt arcu non sodales neque sodales ut. At varius vel pharetra vel turpis. Id neque aliquam vestibulum morbi blandit cursus risus at. Morbi non arcu risus quis varius quam quisque. Quisque id diam vel quam elementum pulvinar. Vel risus commodo viverra maecenas. Eu facilisis sed odio morbi. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Auctor elit sed vulputate mi sit amet mauris commodo quis. Elementum eu facilisis sed odio morbi quis. Quisque sagittis purus sit amet volutpat.</p>
    <h2>Title 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus in ornare quam viverra orci sagittis eu. Consectetur purus ut faucibus pulvinar elementum. Faucibus in ornare quam viverra. Quam quisque id diam vel quam elementum. Enim diam vulputate ut pharetra sit amet aliquam. Sed risus pretium quam vulputate dignissim. Eget nullam non nisi est sit. Dolor sit amet consectetur adipiscing elit. Donec ultrices tincidunt arcu non sodales neque sodales ut. At varius vel pharetra vel turpis. Id neque aliquam vestibulum morbi blandit cursus risus at. Morbi non arcu risus quis varius quam quisque. Quisque id diam vel quam elementum pulvinar. Vel risus commodo viverra maecenas. Eu facilisis sed odio morbi. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Auctor elit sed vulputate mi sit amet mauris commodo quis. Elementum eu facilisis sed odio morbi quis. Quisque sagittis purus sit amet volutpat.</p>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  font-family: Verdana;
  color: #333;
}

.container {
  width: 50%;
  margin: 60px auto;
  
  ul {
    display: flex;
    margin-bottom: 20px;
    background: #fff;
    padding: 12px 0 16px;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #eee;
    
    li {
      list-style: none;
      margin-right: 20px;
      
      a {
        color: gray;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 20px;
        font-weight: bold;
        
        &:hover {
          color: red;
        }
      }
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
  
  h2 {
    margin-bottom: 12px;
  }
  
  p {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 40px;
  }
  
  .wrapper {
    position: relative;
  }
}
View Compiled
$(document).ready(function(){
  var i=0;
  $(".wrapper h2").each(function(){
    i++;
    $(this).attr("id","ancore_"+i);	
  });
 
  $('h2[id]').each(function() {
    var target = this.id;
    var text = $(this).text();
    $('#ancore_menu').append(function() {
      return '<li><a href="#' + target + '">' + text + '</a></li>';
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js