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

HERE IS A FIDDLE

https://jsfiddle.net/postcolonialboy/541qsetp/16/

HTML

1. <a href="#contributors" class="element-item bailey">Bailey</a>
2. <a href="#contributors" class="element-item huijnen">Huijnen</a>
3. 
   
4. <div id="contributors" class="modal">
5.   <div class="modal-container">
6.     <header><span class="close">×</span>
7.       <h2>Contributors</h2>
8.     </header>
9.     <div class="content">
10.       <section>
11.         <article>
12.           <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
13.           <div class="item" id="huijnen">
14.             <h4>Huijnen</h4>
15.           </div>
16.           <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
17.           <div class="item" id="bailey">
18.             <h4>Bailey</h4>
19.           </div>
20.           <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
21.         </article>
22.       </section>
23.     </div>
24.   </div>
25. </div>

JS

1. //popup nest modals
2. $(function() {
3.   const openModals = [];
4.   $('.element-item').click(e => {
5.     e.preventDefault();
6.     $(e.currentTarget).closest('.modal').add('body').addClass('open');
7.     openModals.push($($(e.currentTarget).attr('href')).show());
8.   });
9.   $(window).add('.close').click(e => {
10.     e.stopPropagation();
11.     if ($(e.target).is('.modal, .close')) {
12.       const closing = openModals.pop().addClass('modal-content-active');
13.       setTimeout(() => {
14.         closing.hide().removeClass('modal-content-active')
15.       }, 0);
16.       if (openModals.length > 0) {
17.         openModals[openModals.length - 1].removeClass('open');
18.       } else $('body').removeClass('open');
19.     }
20.   });
21. });
22. //jump to anchor in modal
23. $('.huijnen').on('click', function(e) {
24.   requestAnimationFrame(() =>
25.     $('#contributors').animate({
26.       scrollTop: $('#huijnen').offset().top - 40
27.     }, 500))
28. });
29. $('.bailey').on('click', function() {
30.   requestAnimationFrame(() => $('#contributors').animate({
31.     scrollTop: $('#bailey').offset().top - 40
32.   }, 500))
33. });

CSS

1. .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; }
2. /* The Close Button */
3. .close { z-index: 1000; font-size: 3vw; float: right; transition: all 0.3s ease; }
4. /* Modal Content */
5. header, .content { width: 60%; margin: auto; }
6. .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; }