滚动到页面部分ID时更改CSS内容

Question

我正在创建一个侧边栏菜单，在其中滚动到新的相应ID标签时，菜单图标会更改。每个全高div都有一个从＃01到＃08的ID标签。

我非常需要代码的修复程序。我不是javascript方面的佼佼者，但此项目需要它。我已经搜索了StackOverflow的所有内容，但我不太了解答案。如我的代码所示。

请帮助，谢谢。

document.getElementById("icon0").focus();

$(document).ready(function() {

  $("div").mouseenter(function() {
    var id = $(this).attr('id');
    $('a').removeClass('active');
    $("[href=#" + id + "]").addClass('active');
  });

});

nav ul li a {
  content: url(../wp-content/uploads/2018/08/Scroll_Token.png);
  width: 40px !important;
  height: 40px;
  min-width: 5%;
  height: auto;
}

nav ul li a#icon0:hover,
nav ul li a#icon0:focus,
nav ul li a#icon0.active {
  content: url(../wp-content/uploads/2018/08/Scroll_0.png);
}

nav ul li a#icon1:hover,
nav ul li a#icon1:focus,
nav ul li a#icon1.active {
  content: url(../wp-content/uploads/2018/08/Scroll_1.png);
}

nav ul li a#icon2:hover,
nav ul li a#icon2:focus,
nav ul li a#icon2.active {
  content: url(../wp-content/uploads/2018/08/Scroll_2.png);
}

nav ul li a#icon3:hover,
nav ul li a#icon3:focus,
nav ul li a#icon3.active {
  content: url(../wp-content/uploads/2018/08/Scroll_3.png);
}

nav ul li a#icon4:hover,
nav ul li a#icon4:focus,
nav ul li a#icon4.active {
  content: url(../wp-content/uploads/2018/08/Scroll_4.png);
}

nav ul li a#icon5:hover,
nav ul li a#icon5:focus,
nav ul li a#icon5.active {
  content: url(../wp-content/uploads/2018/08/Scroll_5.png);
}

nav ul li a#icon6:hover,
nav ul li a#icon6:focus,
nav ul li a#icon6.active {
  content: url(../wp-content/uploads/2018/08/Scroll_6.png);
}

nav ul li a#icon7:hover,
nav ul li a#icon7:focus,
nav ul li a#icon7.active {
  content: url(../wp-content/uploads/2018/08/Scroll_7.png);
}

nav ul li a#icon8:hover,
nav ul li a#icon8:focus,
nav ul li a#icon8.active {
  content: url(../wp-content/uploads/2018/08/Scroll_8.png);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu" style="padding-top:2%;">
  <ul>
    <li>
      <a id="icon0" href="#00"></a>
    </li>
    <li>
      <a id="icon1" href="#01"></a>
    </li>
    <li>
      <a id="icon2" href="#02"></a>
    </li>
    <li>
      <a id="icon3" href="#03"></a>
    </li>
    <li>
      <a id="icon4" href="#04"></a>
    </li>
    <li>
      <a id="icon5" href="#05"></a>
    </li>
    <li>
      <a id="icon6" href="#06"></a>
    </li>
    <li>
      <a id="icon7" href="#07"></a>
    </li>
    <li>
      <a id="icon8" href="#08"></a>
    </li>
  </ul>
</nav>