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>
<article>
  <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 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-4">
  <h2>Пункт 4</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-5">
  <h2>Пункт 5</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-6">
  <h2>Пункт 6</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-7">
  <h2>Пункт...

CSS

header, footer {
  height:100px;
  background:gray;
}
article {
  width:75%;
}
sidebar ol {
  padding-left:0;
}
.anchor {
  margin-bottom:40px;
}
#anchor-menu-wrapper {
  width:70%;
}
#anchor-menu {
    position: fixed;
    top: 120px;
    right: 20px;
    max-width: 25%;
    border-left: 2px solid rgb(26, 115, 232);
    padding-left: 30px;
    padding-right: 10px;
    overflow-y: scroll;
    height: calc(100vh - 120px);
}
#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;
    
$(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');  
//});