Jumping to anchor within modal with a fixed header

1

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


>

> ×
>

Contributors


>
>

>
>
>
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
>

>

Huijnen


>

>
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
>

>

Bailey


>

>
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
>
>
>

>

>

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

×

Contributors


line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line

Huijnen


line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line

Bailey


line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line

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