滚动到一个点的粘性div

Question

我是JavaScript的新手。我的成就是能够向下滚动到右侧div（#aside）的顶部并将其固定，而另一个div继续向下滚动。

我已经从here模仿了这段代码并添加了我自己的ID和类，但它不起作用。

这是我自己的version

HTML（#aside fixed div）

<div id="wrapper">
      <nav>
        <ul class="nav_links">
          <li><a href="">Home</a></li>
          <li><a href="">Blog</a></li>
          <li><a href="">About</a></li>
        </ul>
      </nav>
<header></header>

    <div id="main">
        <p>Curabitur pellentesque erat feugiat justo euismod, et auctor erat tristique. Duis maximus arcu non nisl placerat cursus eu nec felis. Nunc in suscipit elit. Curabitur nec fermentum dui. Fusce et molestie odio. Mauris mattis commodo risus sit amet
          fringilla. Quisque pretium sem ut est iaculis, a euismod lacus convallis. Fusce porta, justo quis porttitor commodo, justo velit condimentum augue, at tempor nunc dui pretium lacus. Phasellus eget leo neque.</p>
        <p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
          velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
        <p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
          velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>

        <p>Curabitur pellentesque erat feugiat justo euismod, et auctor erat tristique. Duis maximus arcu non nisl placerat cursus eu nec felis. Nunc in suscipit elit. Curabitur nec fermentum dui. Fusce et molestie odio. Mauris mattis commodo risus sit amet
          fringilla. Quisque pretium sem ut est iaculis, a euismod lacus convallis. Fusce porta, justo quis porttitor commodo, justo velit condimentum augue, at tempor nunc dui pretium lacus. Phasellus eget leo neque.</p>

        <p>Nam malesuada arcu et eros laoreet faucibus. Quisque sit amet lectus ipsum. Ut bibendum, eros et molestie egestas, enim felis iaculis turpis, sit amet consequat sem erat id dolor. Vivamus a leo viverra, viverra odio a, imperdiet dolor. Morbi libero
          neque, gravida ut sem eget, dictum euismod urna. Vestibulum risus ex, venenatis eget fermentum quis, scelerisque eget elit. Phasellus vel sodales urna. Quisque quis tempor ex. Proin sit amet odio eleifend, tempor purus vel, venenatis sem. Vivamus</p>

        <p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
          velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
      </div>

      <div id="aside">

      <p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
        velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
      <p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
        velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
      <p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
        velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
      <p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
        .
      </p>
    </div>

    <footer></footer>

    </div><!--wrapper-->

CSS（#aside和.stick）

.nav_links {
  padding: 0;
  margin: 15px;
}

.nav_links li {
  display: inline-block;
}

.nav_links a {
  text-decoration: none;
  margin-left: 80px;
  color: #000;
}

.nav_links a:hover {
  color: #ada;
  transition: .33s;
}

header {
  width: 100%;
  top: 70px;
  position: relative;
  padding-top: 35%;
  background-image: url("park1.jpg");
  background-size: 100%;
}

#main {
  background-color: #ded;
  top: 60px;
  width: 60%;
  float: left;
}

#aside {
  float: right;
  width: 30%;
  top: 200px;
  background-color: #ded;
}

.stick {
  position: fixed;
  top: 0px;
}

footer {
  clear: both;
  height: 200px;
  position: relative;
  background-color: #aaa;
}

的Javascript

var aside = document.getElementById("#aside");
var stop = (aside.offsetTop - 210);

window.onscroll = function(e) {
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  console.log(scrollTop, aside.offsetTop);

  if (scrollTop >= stop) {
    aside.addClass = 'stick';
  } else {
    aside.removeClass = '';
  }

}