когда я прокручиваю свою страницу, мой элемент вертикального меню прокручивается одновременно

Question

Возможно ли, когда я прокручиваю свою страницу, мое вертикальное меню прокручивается одновременно? Я уже сделал следующий код ниже, но почему-то не могу заставить его работать должным образом. Он также показал это в консоли:

Ошибка: синтаксическая ошибка, нераспознанное выражение: a [href * = #]

$(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();

* {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  transition: all .1s ease;
}

html,
body {
  height: 100%;
}

h1 {
  font-size: 64px;
}

.page-section {
  height: 480px;
  width: 50%;
  margin-left: 35%;
  margin-top: 5%;
  padding: 3em;
  background: linear-gradient(45deg, #8d8f91 10%, #185a9d 90%);
  color: white;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
}

.navigation {
  overflow: auto;
  height: 250px;
  position: fixed;
  width: 30%;
  margin-left: 2%;
  background-color: #999;
  color: #fff;
}

.navigation__link {
  display: block;
  color: #ddd;
  text-decoration: none;
  padding: 1em;
  font-weight: 400;
}

.navigation__link:hover {
  background-color: #aaa;
}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<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>
  <a class="navigation__link" href="#5">Section 5</a>
  <a class="navigation__link" href="#6">Section 6</a>
  <a class="navigation__link" href="#7">Section 7</a>
</nav>

<div class="page-section hero" id="1">
  <h1>Smooth scroll, fixed jump menu with active class</h1>
</div>
<div class="page-section" id="2">
  <h1>Section Two</h1>
</div>
<div class="page-section" id="3">
  <h1>Section Three</h1>
</div>
<div class="page-section" id="4">
  <h1>Section Four</h1>
</div>
<div class="page-section" id="5">
  <h1>Section Five</h1>
</div>
<div class="page-section" id="6">
  <h1>Section Six</h1>
</div>
<div class="page-section" id="7">
  <h1>Section Seven</h1>
</div>

Любая помощь будет принята с благодарностью!

Answer 1

Я обновил вашу скрипку изменениями, которые, как мне кажется, вы хотели.

https://jsfiddle.net/41s80k97/

Я добавил только $('.navigation a').eq(i).get(0).scrollIntoView(), чтобы каждый раз, когда вы назначаете активный класс в раздел, он также прокручивает метку раздела в поле зрения.