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

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

Он работает нормально.

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

Когда «.content» имеет высоту 80vh, это выглядит нормально, но скрипт не прокручивается до привязки.

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

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

Спасибо

СКРИПКА

HTML

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

Код (разметка): 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

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

Код (разметка):