我怎样才能正确地用jQuery-scrolltofixed滚动一些div？

Question

我使用了jquery-scrolltofixed插件来滚动修复多个div。但是只有第二个div滚动修复，当它到达页面底部时，它位于错误的位置。我该如何解决这个问题？ 我的代码在这里： https://codepen.io/elhambgh4/pen/EzYLBK

javascript：

$(document).ready(function() {
  var summaries = $('.summary');
  summaries.each(function(i) {
    var summary = $(summaries[i]);
    var next = summaries[i + 1];

    summary.scrollToFixed({
      marginTop: $('.header').outerHeight(true) + 10,
      limit: function() {
        var limit = 0;
        if (next) {
          limit = $(next).offset().top - $(this).outerHeight(true) - 10;
        } else {
          limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
        }
        return limit;
      },
      zIndex: 999
    });
  });
});