带有粘性附加组件的jQuery Waypoints插件在页面高度更改时不重新计算参考点

带有粘性附加组件的jQuery Waypoints插件在页面高度更改时不重新计算参考点,jquery,css,frontend,sticky,jquery-waypoints,Jquery,Css,Frontend,Sticky,Jquery Waypoints,我正在使用jQuery Waypoints插件和sticky插件锁定窗口底部的表单提交部分,直到滚动到表单底部时该部分自然显示出来 出于设计/风格方面的原因,我需要粘滞版本具有横跨整个窗口的上边框,而当部分位于其自然位置时,上边框仅横跨其中心柱。因此,我使用的是“粘性外包装器”和“粘性内包装器”,而不是默认的“粘性包装器” 我所经历的是,如果表单的任何部分被折叠,那么当滚动过表单时,粘性版本将不会锁定回表单中,如果显示任何新的部分(如验证摘要),那么粘性版本将在向下滚动页面时过早锁定回表单中。它

我正在使用jQuery Waypoints插件和sticky插件锁定窗口底部的表单提交部分,直到滚动到表单底部时该部分自然显示出来

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

我所经历的是,如果表单的任何部分被折叠,那么当滚动过表单时,粘性版本将不会锁定回表单中,如果显示任何新的部分(如验证摘要),那么粘性版本将在向下滚动页面时过早锁定回表单中。它似乎被引入的像素数所关闭

这让我猜测Waypoints插件在页面加载时正在计算一个固定数量的像素作为参考点,因此,如果表单的高度发生变化,它最终会关闭。反过来,这可能是我的代码不正确的一种症状,这是我预料不到的,因此以下是相关代码:

HTML:

JS:


我团队中的一位开发人员意识到,当窗口调整大小时,它将重新开始工作,因此目前的解决方案是,每当运行导致表单内容高度改变的方法时,都会强制调整大小

也许有一种更有针对性的方法可以重新计算航路点,而不必强制完全调整内容大小,但除非有人能够提供更精确的事件来利用,否则就可以了

<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>
.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%;
}
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'
        });
    }
};