0 Replies - 385 Views - Last Post: 12 October 2019 - 05:07 PM

#1 2pq95hc98   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 10-July 15

Jumping to anchor within modal with a fixed header

Posted 12 October 2019 - 05:07 PM

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


Is This A Good Question/Topic? 0
  • +

Page 1 of 1