航点与我的sidenav无法正常工作

Question

我试图在我的网站上制作一个侧面导航，它将“活动”类添加到它的四个按钮，但我似乎无法让它正常工作。

我已经成功地将代码点添加到代码中，但它们似乎总是有点偏离，需要从用户处进行一些额外的滚动来激活航点。我也尝试遵循文档中的{offset}规则，但没有面纱。它们要么从最后到第一个停止正常工作，要么从头到尾停止这样做。

为了使sidenav工作，我将页面拆分为列，如下面的CSS所示。随意提供有关代码的见解，因为这是一个学习练习，我知道我的代码目前非常脏（特别是Javascript）

侧面导航：

<div class="sidebar verticalized" id="sidebar-verticalized">
  <ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
    <li class="side-link">
      <a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
    </li>
    <li class="side-link">
      <a href="#portfolio" onclick="clickTwo()" class="link2">02</a>
    </li>
    <li class="side-link">
      <a href="#what-we-do" onclick="clickThree()" class="link3">03</a>
    </li>
    <li class="side-link">
      <a href="#contact" onclick="clickFour()" class="link4">04</a>
    </li>
  </ul>
</div>

CSS：

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;  /* remove scrollbar space */
background: transparent;  /* optional: just make scrollbar invisible */
}

.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}

我的混乱JS（每个部分在下面声明）：

var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');

$section1.waypoint(function (){
  $link1.addClass('active');
  $link2.removeClass('active');
  $link3.removeClass('active');
  $link4.removeClass('active');
});

$section2.waypoint(function(){
  $link1.removeClass('active');
  $link2.addClass('active');
  $link3.removeClass('active');
  $link4.removeClass('active');
});

$section3.waypoint(function(){
  $link1.removeClass('active');
  $link2.removeClass('active');
  $link3.addClass('active');
  $link4.removeClass('active');
});

$section4.waypoint(function(){
  $link1.removeClass('active');
  $link2.removeClass('active');
  $link3.removeClass('active');
  $link4.addClass('active');
});

到目前为止我尝试过的：

偏移：底部视图（部分有时太大，因此旧的活动元素仍然存在）

偏移量：+/- x％（这解决了一端而不是另一端的问题：我可以在链接上从1到4，它可以工作，但是4到1被打破，反之亦然）

欢迎任何和所有建议/提示。我试图模仿每个部分的活动项目的bootstrap导航栏行为。

Answer 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

     <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

     <!-- Popper JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

           <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

      <style>
      @import url('https://fonts.googleapis.com/css?family=Varela+Round');
      html, body {
          overflow-x: hidden;
          height: 100%;
      }
      body {
          background: #fff;
          padding: 0;
          margin: 0;
          font-family: 'Varela Round', sans-serif;
      }
      .header {
          display: block;
          margin: 0 auto;
          width: 100%;
          max-width: 100%;
          box-shadow: none;
          background-color: #FC466B;
          position: fixed;
          height: 60px!important;
          overflow: hidden;
          z-index: 10;
      }
      .main {
          margin: 0 auto;
          display: block;
          height: 100%;
          margin-top: 60px;
      }
      .mainInner{
          display: table;
          height: 100%;
          width: 100%;
          text-align: center;
      }
      .mainInner div{
          display:table-cell;
          vertical-align: middle;
          font-size: 3em;
          font-weight: bold;
          letter-spacing: 1.25px;
      }
      #sidebarMenu {
          height: 100%;
          position: fixed;
          left: 0;
          width: 250px;
          margin-top: 60px;
          transform: translateX(-250px);
          transition: transform 250ms ease-in-out;
          background:#414956;
      }
      .sidebarMenuInner{
          margin:0;
          padding:0;
          border-top: 1px solid rgba(255, 255, 255, 0.10);
      }
      .sidebarMenuInner li{
          list-style: none;
          color: #fff;
          text-transform: uppercase;
          font-weight: bold;
          padding: 20px;
          cursor: pointer;
          border-bottom: 1px solid rgba(255, 255, 255, 0.10);
      }
      .sidebarMenuInner li span{
          display: block;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.50);
      }
      .sidebarMenuInner li a{
          color: #fff;
          text-transform: uppercase;
          font-weight: bold;
          cursor: pointer;
          text-decoration: none;
      }
      input[type="checkbox"]:checked ~ #sidebarMenu {
          transform: translateX(0);
      }

      input[type=checkbox] {
          transition: all 0.3s;
          box-sizing: border-box;
          display: none;
      }
      .sidebarIconToggle {
          transition: all 0.3s;
          box-sizing: border-box;
          cursor: pointer;
          position: absolute;
          z-index: 99;
          height: 100%;
          width: 100%;
          top: 22px;
          left: 15px;
          height: 22px;
          width: 22px;
      }
      .spinner {
          transition: all 0.3s;
          box-sizing: border-box;
          position: absolute;
          height: 3px;
          width: 100%;
          background-color: #fff;
      }
      .horizontal {
          transition: all 0.3s;
          box-sizing: border-box;
          position: relative;
          float: left;
          margin-top: 3px;
      }
      .diagonal.part-1 {
          position: relative;
          transition: all 0.3s;
          box-sizing: border-box;
          float: left;
      }
      .diagonal.part-2 {
          transition: all 0.3s;
          box-sizing: border-box;
          position: relative;
          float: left;
          margin-top: 3px;
      }
      input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
          transition: all 0.3s;
          box-sizing: border-box;
          opacity: 0;
      }
      input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
          transition: all 0.3s;
          box-sizing: border-box;
          transform: rotate(135deg);
          margin-top: 8px;
      }
      input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
          transition: all 0.3s;
          box-sizing: border-box;
          transform: rotate(-135deg);
          margin-top: -9px;
      }
      </style>
      <body>

      <div class="header"></div>
        <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
        <label for="openSidebarMenu" class="sidebarIconToggle">
          <div class="spinner diagonal part-1"></div>
          <div class="spinner horizontal"></div>
          <div class="spinner diagonal part-2"></div>
        </label>
        <div id="sidebarMenu">
          <ul class="sidebarMenuInner">
            <li><a href="#">Jelena Jovanovic</a></li>
            <li><a href="#">Company</a></li>
            <li><a href="">Instagram</a></li>
            <li><a href="">Twitter</a></li>
            <li><a href="">YouTube</a></li>
            <li><a href="">Linkedin</a></li>
          </ul>
        </div>
        <div id='center' class="main center">
          <div class="mainInner">
            <div>PURE CSS SIDEBAR TOGGLE MENU</div>
          </div>
          <div class="mainInner">
            <div>PURE CSS SIDEBAR TOGGLE MENU</div>
          </div>
          <div class="mainInner">
            <div>PURE CSS SIDEBAR TOGGLE MENU</div>
          </div>
        </div>
      </body>`enter code here`