在页脚处停止粘边栏

Question

我想得到它所以当我的侧边栏上的最后一个div在页面滚动时保持粘性，但在页脚停止。如何计算限额？这是我的代码：

＆＃13;

＆＃13;

var stickyTop = $('#aside1').offset().top;

$(window).scroll(function() {
  var windowTop = $(window).scrollTop();
  var limit = $('footer').offset().top - $('#aside1').height();

  if (stickyTop < windowTop) {
    $('#aside1').css({ position: 'fixed', top: '150px' });
  } else {
    $('#aside1').css('position','static');
  }

  if (limit < windowTop) {
    var diff = limit - windowTop;
    $('#aside1').css({top: diff});
  }
});

＆＃13;

body {
  background: #aba;
}
header, main, footer {
  display: block;
  max-width: 740px;
  margin: 0 auto;
}
header {
  margin-bottom: 15px;
  font-size: 200%;
  background: #456;
  text-align: center;
}
header a {
  color: #fff;
}
article {
  display: block;
  float: left;
  width: 485px;
  height: 1000px;
  background: #fff;
}
aside {
  display: block;
  margin-left: 500px;
  box-shadow: 0 0 0 1px #cff inset;
  background: #cdc;
}
footer {
  position: relative;
  top: 15px;
  margin-bottom: 15px;
  clear: both;
  height: 800px;
  background: #456;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  Sticky sidebar
</header>

<div style="clear:both;"></div>
<main>
  <article id="article"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio modi maiores repellat et, asperiores tempore! Provident velit illo, in quod ea explicabo, dignissimos dolorem voluptatibus, quisquam voluptas consectetur fugiat vel?</h1></article>
  <aside id="aside1">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20</aside>
</main>

<footer></footer>

＆＃13;

＆＃13;

＆＃13;

沙箱：http://jsbin.com/yivomexixi/edit?html,output