Прыжок на якорь в модале с фиксированным заголовком

Question

У меня небольшая проблема. У меня есть скрипт для вложенных модалов, который при щелчке по ссылке переходит прямо на якорь. Это работает нормально.

Однако при стилизации я хотел бы иметь фиксированный заголовок, так как ".content" div прокручивает на якорь.

Когда ".content" имеет высоту 80vhвыглядит хорошо, но скрипт не прокручивается до якоря.

Когда высота ".content" составляет 80%, скрипт работает, но фиксированный заголовок не остается фиксированным и прокручивается с помощью "".content ".

Как заставить скрипт работать, но сохранить фиксированный заголовок?

JSFiddle

HTML

<a href="#contributors" class="element-item bailey">Bailey</a>
<a href="#contributors" class="element-item huijnen">Huijnen</a>

<div id="contributors" class="modal">
  <div class="modal-container">
    <header><span class="close">×</span>
      <h2>Contributors</h2>
    </header>
    <div class="content">
      <section>
        <article>
          <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
          <div class="item" id="huijnen">
            <h4>Huijnen</h4>
          </div>
          <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
          <div class="item" id="bailey">
            <h4>Bailey</h4>
          </div>
          <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
        </article>
      </section>
    </div>
  </div>
</div>

JS

//popup nest modals
$(function() {
  const openModals = [];
  $('.element-item').click(e => {
    e.preventDefault();
    $(e.currentTarget).closest('.modal').add('body').addClass('open');
    openModals.push($($(e.currentTarget).attr('href')).show());
  });
  $(window).add('.close').click(e => {
    e.stopPropagation();
    if ($(e.target).is('.modal, .close')) {
      const closing = openModals.pop().addClass('modal-content-active');
      setTimeout(() => {
        closing.hide().removeClass('modal-content-active')
      }, 0);
      if (openModals.length > 0) {
        openModals[openModals.length - 1].removeClass('open');
      } else $('body').removeClass('open');
    }
  });
});
//jump to anchor in modal
$('.huijnen').on('click', function(e) {
  requestAnimationFrame(() =>
    $('#contributors').animate({
      scrollTop: $('#huijnen').offset().top - 40
    }, 500))
});
$('.bailey').on('click', function() {
  requestAnimationFrame(() => $('#contributors').animate({
    scrollTop: $('#bailey').offset().top - 40
  }, 500))
});

CSS

.modal { box-sizing: border-box; display: none; position: fixed; z-index: 1; padding-top: 3.125rem; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; transition: all 1.0s ease; }
/* The Close Button */
.close { z-index: 1000; font-size: 3vw; float: right; transition: all 0.3s ease; }
/* Modal Content */
header, .content { width: 60%; margin: auto; }
.content { height: 80%; padding-top: 3%; padding-bottom: 3%; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow: auto; min-height: 0; font-size: 2vw; }