Question

我使用sticky-kit滚动内容，然后在到达一列内容的末尾后进行修复。

以下是我的网站上粘贴工具正常工作的一些示例： Example 1，Example 2

但是我遇到了一个问题，当你到达this post的底部时，右手内容正在消失？我不明白为什么它使用与其他帖子内容完全相同的代码。

我已经研究了粘性套件的参考，并且说添加sticky_kit:recalc应该有助于解决这个问题。但它没有任何区别。

这是我的代码：

$(document.body).trigger("sticky_kit:recalc");
$("#single__images, #single__content").stick_in_parent({offset_top:150});

HTML：

<article id="single-post">
     <div id="single__images><img src="#"></div>
     <div id="single__content>Text goes here</div>
</article>

有没有人知道可能导致内容消失的原因以及如何解决？

Answer 1

我也有同样的问题，我的粘性div在底部消失了。我把它用于bootstrap cols。我通过将position：static添加到sticky id来解决它。要么是jQuery：

$('#my-sticky-element')
.on('sticky_kit:bottom', function(e) {
    $(this).parent().css('position', 'static');
})
.on('sticky_kit:unbottom', function(e) {
    $(this).parent().css('position', 'relative');
})

或者仅仅通过CSS：

#my-sticky-element {
   position: static
}

Answer 2

对于我的项目，我必须通过更改position:relative;到position:static;

的列来解决

当接近粘性元素变为unstick的布局部分时，它的位置从position:fixed;变为position:absolute;。如果指定的父元素不是直接父元素，那么它们之间具有相对或绝对位置的任何元素都会搞砸粘性元素的位置。

sticky-kit内容在滚动的底部消失

2 个答案: