Bootstrap附件比内容更高，滚动失败

Question

我遇到同样的问题，this question的作者用词缀表示，特别是作者对接受的答案进行评论。回答者提供了二次解决方案，但这并不令人满意。

当出现以下所有条件时，会出现问题：

1. 加贴div高于视口
2. 附加的div是页面的最高部分
3. 用户滚动过去的词缀

在这个jsFiddle：http://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({});
}