Как исправить наезжающий на футер сайдбар во время скроллинга?

Question

Делаю сайдбар с якорями указывающими на сектора в основном контенте во время скроллинга. Три проблемы с которыми столкнулся:

хочу, чтобы сайдбар в концовке приклеился к футеру и не выходил за его пределы
В песочнице мне не удалось воспроизвести, но в проекте у меня по какой-то причине, если сам прокликиваю якоря в сайдбаре для перехода в нужный сектор контента, то, к примеру, по клику на 3ей ссылке активируется 4ая, по пятой 6ая, по 6ой 7ая.. В чём может быть причина?
Список с якорями не доезжает до конечного якоря

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');  
//});

header,
footer {
  height: 100px;
  background: gray;
}

article {
  width: 75%;
}

sidebar ol {
  padding-left: 0;
}

.anchor {
  margin-bottom: 40px;
}

#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;
}

<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>Пункт 7</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-8">
      <h2>Пункт 8</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-9">
      <h2>Пункт 9</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-10">
      <h2>Пункт 10</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-11">
      <h2>Пункт 11</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-12">
      <h2>Пункт 12</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-13">
      <h2>Пункт 13</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-14">
      <h2>Пункт 14</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-15">
      <h2>Пункт 15</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-16">
      <h2>Пункт 16</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-17">
      <h2>Пункт 17</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-18">
      <h2>Пункт 18</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-19">
      <h2>Пункт 19</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-20">
      <h2>Пункт 20</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>
  </article>
  <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>
</main>
<footer id="colophon">Copyright</footer>

БЛОГ НА HUSL

Как исправить наезжающий на футер сайдбар во время скроллинга?

Ответы (0 шт):