title: Fixed sidebar menu not jumping to the right places
body: <p>I have the following layout made in flexbox with the exception of a jump-menu that is 'position: fixed;' inside a sidebar. </p>
  
  <p>The browser window scrolls down along with the jump-menu but the menu always ends up in the middle of an associated section. </p>
  
  <p>How do I get the menu to always land at the top of an associated section and not in the middle? </p>
  
  <p>Here's a codepen <a href="https://codepen.io/heavymessing/pen/MBEPyE" rel="nofollow noreferrer">https://codepen.io/heavymessing/pen/MBEPyE</a></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;main&gt;
        &lt;article&gt;
  
          &lt;div class="intro"&gt;
            &lt;header class="intro__header"&gt;
              &lt;h1 class="intro__heading"&gt;Services&lt;/h1&gt;
              &lt;p class="intro__intro"&gt;Services intro text&lt;/p&gt;
            &lt;/header&gt;
          &lt;/div&gt;
  
          &lt;div class="page"&gt;
  
            &lt;aside&gt;
              &lt;nav class="navigation" id="mainNav"&gt;
                &lt;a class="navigation__link" href="#1"&gt;Section 1&lt;/a&gt;
                &lt;a class="navigation__link" href="#2"&gt;Section 2&lt;/a&gt;
                &lt;a class="navigation__link" href="#3"&gt;Section 3&lt;/a&gt;
                &lt;a class="navigation__link" href="#4"&gt;Section 4&lt;/a&gt;
              &lt;/nav&gt;
            &lt;/aside&gt;
  
            &lt;div class="page-sections"&gt;
              &lt;div class="page-section" id="1"&gt;
                &lt;h1&gt;Smooth scroll, fixed jump menu with active class&lt;/h1&gt;
                &lt;a class="arrow bounce" href="#2"&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="page-section" id="2"&gt;
                &lt;h1&gt;Section Two&lt;/h1&gt;
                &lt;a class="arrow bounce" href="#3"&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="page-section" id="3"&gt;
                &lt;h1&gt;Section Three&lt;/h1&gt;
                &lt;a class="arrow bounce" href="#4"&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="page-section" id="4"&gt;
                &lt;h1&gt;Section Four&lt;/h1&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/article&gt;
  
      &lt;/main&gt;
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>    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);
  
        &amp;:first-child {
          margin-top: 0;
        }
        &amp;: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;
  
          &amp;__link {
            display: block;
            color: #ddd;
            text-decoration: none;
            padding: 1em;
            font-weight: 400;
  
            &amp;:hover {
              background-color: rgba(84, 84, 84, 0.74);
            }
  
            &amp;.active {
              color: white;
              background-color: rgba(0, 0, 0, 0.1);
            }
          }
        }
      }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>        $(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 &lt;= scrollDistance) {
                  $('.navigation a.active').removeClass('active');
                  $('.navigation a').eq(i).addClass('active');
              }
          });
      }).scroll();
  </code></pre>