css - Bootstrap 词缀高于内容，滚动失败

Question

我和 this question 的作者有同样的问题带有词缀的展品，特别是作者对接受的答案的评论。回答者提供了二次解决方案，但这并不令人满意。

出现以下所有情况时会出现此问题:

1. 附加的 div 比视口(viewport)高
2. 附加的 div 是页面的最高部分
3. 用户滚动到 affix-top

它在这个 JSFiddle 中进行了演示:https://jsfiddle.net/g1ns9k8o/3/使用以下代码:

CSS:

.top-bit { height: 100px; }
.sidebar { width: 200px; padding: 10px; }
.sidebar.affix { top: 10px; }

HTML:

<div class="top-bit">
</div>

<div class="row">
    <div class="col-xs-9">
        <!-- short content -->
    </div>
    <div class="col-xs-3">
        <div class="sidebar" data-spy="affix" data-offset-top="100">
            <!-- long content -->
        </div>
    </div>
</div>

Answer 1

我遇到了这个问题并遇到了抖动的滚动运动。为了修复它，我使用 JavaScript 将附加元素的高度与它旁边的元素进行比较。如果附加高度小于内容高度，则设置词缀。否则，就让附加元素留在原处。

所以，假设这是我正在修复内容元素旁边的侧边栏。

// Pseudocode
if (sidebar.height < content.height) {
    $(sidebar).affix({});
}