1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Jumping to anchor within modal with a fixed header

Discussion in 'HTML & Website Design' started by 7643sfsag6, Oct 12, 2019.

  1. #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
    SEMrush
    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>
    Code (markup):
    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))
    });
    Code (markup):

    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; }
    
    Code (markup):
     
    7643sfsag6, Oct 12, 2019 IP
    SEMrush