带有粘性附加组件的 jQuery Waypoints 插件在页面高度变化时不会重新计算引用点

Question

我使用 jQuery Waypoints 插件和粘性附加组件来锁定窗口底部的表单提交部分，直到滚动到表单底部时自然显示该部分。

出于设计/风格的原因，我需要粘性版本具有跨越整个窗口的顶部边框，而当该部分位于其自然位置时，顶部边框仅跨越其中心列。因此，我使用“粘性外包装器”和“粘性内包装器”而不是默认的“粘性包装器”。

我遇到的情况是，如果表单的任何部分折叠，则粘性版本在滚动经过表单时将不会锁定回表单，并且如果显示任何新部分(例如验证摘要)，则粘性版本将不会锁定到表单中。向下滚动页面时，版本将过早锁定。它似乎与引入的像素数量有关。

这让我猜测 Waypoints 插件在页面加载时计算固定数量的像素作为引用点，因此如果表单的高度发生变化，它最终会关闭。反过来，这可能是我的代码以我意想不到的方式不正确的症状，所以这里是相关代码:

HTML:

<div class="col-xs-12 suppress-col-gutters sticky-outer-wrapper">
  <div class="col-xs-12 sticky-inner-wrapper">
    <div class="container">
      ... various elements ...
    </div>
  </div>
</div>

CSS:

.sticky-outer-wrapper {
  min-height: 160px;
}

.stuck .sticky-inner-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.2);
  background: #ffffff;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
}

JS:

var createStickyButtons = function() {
    if ($('body').hasClass('stuck')) {
        var waypoint = new Waypoint({
            element: $('.sticky-outer-wrapper'),
            handler: function (direction) {
                $('body').removeClass('stuck');
                if (direction === 'up') {
                    $('body').addClass('stuck');
                }
            },
            offset: 'bottom-in-view'
        });
    }
};

Answer 1

我团队的一位开发人员意识到，当调整窗口大小时，它会再次开始工作，因此现在的解决方案是，每当运行导致表单内容高度发生变化的方法时，强制调整大小。

可能有一种更有针对性的方法来重新计算路径点，而无需强制完全调整内容大小，但除非有人可以提供更精确的事件来利用，否则这种方法就可以了。