JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header>Logo</header>
<main >
<div id="anchor-menu-wrapper">
<sidebar id="anchor-menu">
    <h4>Содержание</h4>
    <h5>Новинки:</h5>
    <ol>
      <li><a href="#anchor-1">Пункт 1</a></li>
      <li><a href="#anchor-2">Пункт 2</a></li>
      <li><a href="#anchor-3">Пункт 3</a></li>
      <li><a href="#anchor-4">Пункт 4</a></li>
      <li><a href="#anchor-5">Пункт 5</a></li>
      <li><a href="#anchor-6">Пункт 6</a></li>
      <li><a href="#anchor-7">Пункт 7</a></li>
      <li><a href="#anchor-8">Пункт 8</a></li>
      <li><a href="#anchor-9">Пункт 9</a></li>
      <li><a href="#anchor-10">Пункт 10</a></li>
      <li><a href="#anchor-11">Пункт 11</a></li>
      <li><a href="#anchor-12">Пункт 12</a></li>
      <li><a href="#anchor-13">Пункт 13</a></li>
      <li><a href="#anchor-14">Пункт 14</a></li>
      <li><a href="#anchor-15">Пункт 15</a></li>
      <li><a href="#anchor-16">Пункт 16</a></li>
      <li><a href="#anchor-17">Пункт 17</a></li>
      <li><a href="#anchor-18">Пункт 18</a></li>
      <li><a href="#anchor-19">Пункт 19</a></li>
      <li><a href="#anchor-20">Пункт 20</a></li>
    </ol>
  </sidebar>
</div>
  <article class="articles">
    <div class="anchor" id="anchor-1">
      <h2>Пункт 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita perspiciatis deleniti sint, commodi voluptatibus! Commodi accusantium itaque velit aut sequi alias dolores cumque obcaecati. Molestiae aliquid voluptatibus asperiores totam assumenda!</p>
    </div>
    <div class="anchor" id="anchor-2">
      <h2>Пункт 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae placeat consequatur temporibus fugit modi molestias iure quisquam, ad fuga iste maiores, at doloremque minima aliquid, eos exercitationem incidunt sint corporis.</p>
    </div>
    <div class="anchor" id="anchor-3">
      <h2>Пункт 3</h2>
      <p>Lorem ipsum dolor sit...

CSS

main {
  position: relative;
}
header, footer {
  height:100px;
  background:gray;
}
.articles {
max-width:   calc(100% - 150px);
}

.anchor {
  /* margin-bottom: 40px; */
}
#anchor-menu-wrapper {
  width:70%;
}
#anchor-menu {
    position: sticky;
    display: block;
  
    top: 120px;
    float: right;
   
    left: calc(100% - 20px);
    width: 150px;
    border-left: 2px solid rgb(26, 115, 232);



}
#anchor-menu a:not(.active)  {
    color: rgb(0, 0, 0);
    display: block;
    text-decoration: none;
}
#anchor-menu a.active {
  color: #1e73be;
}

JavaScript

var $sidebar = $("#anchor-menu");
var $sidebarTop = $sidebar.position().top;
var $sidebarHeight = $sidebar.height();
var $footer = $('#colophon');
var $footerTop = $footer.position().top;
let x = 2
 $(document).scroll(function(e){
        $('.anchor').each(function(a,b){
            let item = document.querySelector('#anchor-menu a[href="#' + b.getAttribute('id') + '"]');
             if (b.offsetTop-5 < document.scrollingElement.scrollTop + 50)
            {
                $sidebar.find('a').removeClass('active');
                item.classList.add('active');
                //item.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
            }  else 
            {
                item.classList.remove('active');
            }
        });

        var $scrollTop = $(window).scrollTop();
        var $topPosition = Math.max(120, $sidebarTop - $scrollTop);
        if ($scrollTop + $sidebarHeight + 50 > $footerTop) {
        	var $topPosition = Math.min($topPosition, $footerTop - $scrollTop - $sidebarHeight);
        }
    
       //  $sidebar.css("top", $topPosition);
 });
    
//document.querySelector('#anchor-menu').addEventListener('click', function(e) {
//    $sidebar.find('a').removeClass('active');
//    document.querySelector(e.target.getAttribute('href')).classList.add('active');  
//});