Jumping to anchor within modal with a fixed header

Hi all,
I am having a bit of a problem.
I have a script that is for nested modals, that when a link is clicked it jumps straight to an anchor. It works fine.
However when styling, I would like to have a fixed header as the ".content" div scrolls to the anchor.
When ".content" has a height of 80vh it looks fine, but the script doesn't scroll to the anchor.
When ".content" has a height of 80% the script works, but the fixed header doesn't stay fixed and scrolls with the ".content".
How can I have the script work, but keep a fixed header.
Thanks

FIDDLE

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>

Code (markup):

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

Code (markup):

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

Code (markup):