Jumping to anchor within modal with a fixed header

HTML & CSS
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

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

Hi, I think you can do away with the heights on the .content div altogether and just let it expand with it’s content.

Actually I stripped all the rules from the .content div and went from there styling your header.

I’ve got the header as position:sticky and it seems to work well. There is a little glitch with the script but when that gets fixed I think you can make things work like you want. Before I close the modal I have to scroll the content back up to the top so the anchor lands correctly next time you open the modal. Or double click it and it will re-scroll itself.

See if this gives you something to work from…

.jump-links {
  display: inline-block;  
}
.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;
}

/* Modal Content */
header,
.content,
footer {
  width: 60%;
  margin: auto;
}
header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  background: yellow;
  font-size: 1.4em;
}
header h2 {
  margin: 0 0 0 auto; /*center the text with flex, and remove default margins*/
  font-size: 1em;
}

/* The Close Button */
.close {
  order: 2;
  margin-left: auto;
  transition: all 0.3s ease;
}
.content { 
}

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

<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>
2 Likes
3

hi ray. this worked! thanks for streamlining it to… it was a bit verbose!

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.