引导词缀高于内容，滚动失败

Question

我遇到了this question 的作者带有词缀的相同问题，特别是作者对已接受的答案的评论。回答者提供了第二个解决方案，但这并不令人满意。

当满足以下所有条件时会出现此问题：

1. 附加的 div 比视口高
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({});
}