Fixed sidebar menu not jumping to the right places

Question

I have the following layout made in flexbox with the exception of a jump-menu that is 'position: fixed;' inside a sidebar.

The browser window scrolls down along with the jump-menu but the menu always ends up in the middle of an associated section.

How do I get the menu to always land at the top of an associated section and not in the middle?

Here's a codepen https://codepen.io/heavymessing/pen/MBEPyE

HTML:

    <main>
      <article>

        <div class="intro">
          <header class="intro__header">
            <h1 class="intro__heading">Services</h1>
            <p class="intro__intro">Services intro text</p>
          </header>
        </div>

        <div class="page">

          <aside>
            <nav class="navigation" id="mainNav">
              <a class="navigation__link" href="#1">Section 1</a>
              <a class="navigation__link" href="#2">Section 2</a>
              <a class="navigation__link" href="#3">Section 3</a>
              <a class="navigation__link" href="#4">Section 4</a>
            </nav>
          </aside>

          <div class="page-sections">
            <div class="page-section" id="1">
              <h1>Smooth scroll, fixed jump menu with active class</h1>
              <a class="arrow bounce" href="#2"></a>
            </div>

            <div class="page-section" id="2">
              <h1>Section Two</h1>
              <a class="arrow bounce" href="#3"></a>
            </div>

            <div class="page-section" id="3">
              <h1>Section Three</h1>
              <a class="arrow bounce" href="#4"></a>
            </div>

            <div class="page-section" id="4">
              <h1>Section Four</h1>
            </div>
          </div>
        </div>
      </article>

    </main>

SCSS:

    header,
    main,
    footer {
      max-width: 1200px;
      margin: 0 auto;
      width: 90%;
    }

    article {
      display: flex;
      flex-wrap: wrap;
    }

    .intro {
      width: 100%;
      padding: 30px;
      overflow: hidden;
      margin: 0;
      height: 200px;
      background-color: yellowgreen;
      overflow: hidden;
    }

    .page {
      overflow: hidden;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
    }

    .page-sections {
      width: 70%;
      margin: 0;
      padding: 0;
    }

    .page-section {
      height: 99vh;
      margin: 5% 0;
      padding: 2%;
      background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
      color: white;
      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);

      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }

    aside {
      overflow: hidden;
      width: 30%;
      background-color: orangered;
      margin: 0;
      padding: 0;

      .navigation {
        position: fixed;
        width: 18.1%;
        background-color: rgba(90, 90, 90, 0.84);
        color: #fff;
        margin: 0;
        padding: 0;

        &__link {
          display: block;
          color: #ddd;
          text-decoration: none;
          padding: 1em;
          font-weight: 400;

          &:hover {
            background-color: rgba(84, 84, 84, 0.74);
          }

          &.active {
            color: white;
            background-color: rgba(0, 0, 0, 0.1);
          }
        }
      }
    }

jQuery:

        $(document).ready(function() {
        $('a[href*=#]').bind('click', function(e) {
            e.preventDefault(); // prevent hard jump, the default behavior

            var target = $(this).attr("href"); // Set the target as variable

            // perform animated scrolling by getting top-position of target-element and set it as scroll target
            $('html, body').stop().animate({
                scrollTop: $(target).offset().top
            }, 600, function() {
                location.hash = target; //attach the hash (#jumptarget) to the pageurl
            });

            return false;
        });
    });

    $(window).scroll(function() {
        var scrollDistance = $(window).scrollTop();

        // Assign active class to nav links while scolling
        $('.page-section').each(function(i) {
            if ($(this).position().top <= scrollDistance) {
                $('.navigation a.active').removeClass('active');
                $('.navigation a').eq(i).addClass('active');
            }
        });
    }).scroll();

Answer 1

This solution will work if I understood correct your query. I have attached snippet please check and let me know if any query. add one condition in jquery and and one line css. I have added one class to body when body scroll greater then "intro" div height and on the basis of added class I have given top:0 to your "aside .navigation" class.

[https://codepen.io/ruchitaghodasara/pen/QBadVx]