jQuery Waypoints 带有粘性附加组件的插件在页面高度变化时不重新计算参考点
jQuery Waypoints plugin with sticky add-on not recalculating reference point when page height changes
我正在使用 jQuery Waypoints 插件和粘性附加组件来锁定 window 底部的表单提交部分,直到该部分自然有滚动到表单底部时显示。
出于 design/stylistic 原因,我需要粘性版本的顶部边框跨越整个 window,而当该部分位于其自然位置时,顶部边框仅跨越其中心柱。因此,我使用 "sticky-outer wrapper" 和 "sticky-inner-wrapper" 而不是默认的 "sticky-wrapper".
我遇到的情况是,如果折叠了表单的任何部分,则粘性版本在滚动经过它时不会锁定回表单,如果显示任何新部分,如验证摘要,则向下滚动页面时,粘性版本会过早锁定。它似乎与引入的像素数量有关。
这让我猜测 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'
});
}
};
我团队中的一位开发人员意识到,当 window 调整大小时它会再次开始工作,所以现在的解决方法是每当方法 运行 导致导致要更改的表单内容高度。
可能有一种更有针对性的方法来重新计算航路点,而无需强制完全调整内容的大小,但除非有人可以提供更精确的事件以供使用,否则这样做就可以了。
我正在使用 jQuery Waypoints 插件和粘性附加组件来锁定 window 底部的表单提交部分,直到该部分自然有滚动到表单底部时显示。
出于 design/stylistic 原因,我需要粘性版本的顶部边框跨越整个 window,而当该部分位于其自然位置时,顶部边框仅跨越其中心柱。因此,我使用 "sticky-outer wrapper" 和 "sticky-inner-wrapper" 而不是默认的 "sticky-wrapper".
我遇到的情况是,如果折叠了表单的任何部分,则粘性版本在滚动经过它时不会锁定回表单,如果显示任何新部分,如验证摘要,则向下滚动页面时,粘性版本会过早锁定。它似乎与引入的像素数量有关。
这让我猜测 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'
});
}
};
我团队中的一位开发人员意识到,当 window 调整大小时它会再次开始工作,所以现在的解决方法是每当方法 运行 导致导致要更改的表单内容高度。
可能有一种更有针对性的方法来重新计算航路点,而无需强制完全调整内容的大小,但除非有人可以提供更精确的事件以供使用,否则这样做就可以了。