Css 引导粘贴高于内容，滚动失败

我也有同样的问题，带词缀的证物的作者，特别是作者对公认答案的评论。回答者提供了第二种解决方案，但这并不令人满意

当出现以下所有情况时，会发生此问题：

附加的div比视图端口高

粘贴的div是页面的最高部分

用户滚动到粘贴顶部

此JSFiddle:中演示了它，代码如下：

CSS:

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

<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>

HTML:

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

<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>

---

我遇到了这个问题，并遇到了急促的滚动运动。为了解决这个问题，我使用JavaScript将粘贴元素的高度与它旁边的元素进行了比较。如果粘贴高度小于内容高度，请设置粘贴。否则，只需将粘贴的元素放置在其所在的位置即可

所以，假设它是一个侧边栏，我正在修复一个内容元素旁边

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

//伪代码
if（边栏高度<内容高度）{
$（侧边栏）。粘贴（{}）；
}

您到底希望发生什么？这看起来像是糟糕的设计。公平的问题是，我希望这里展示的行为是准确的：，但不要在上述条件下搞砸。我不知道这是多么糟糕的设计，但我洗耳恭听。粘贴的全部目的是让重要内容始终在视口中可见和可访问。如果要粘贴的图元大于视口（垂直或水平），则这将破坏粘贴项目的整个目的。我不是设计师，但如果用户体验对你很重要，我会在这里发布一个关于这个主题的问题->在我看来，内容的长度或视口的高度应该与网站的功能无关。对每个人来说；）看看Bootstrap自己的文档。请注意粘贴的边栏在滚动时是如何展开和收拢的，以避免出现确切的问题。可能是唯一可行的解决办法。但是，当其中一个的内容是动态的（页面加载后）时，它会变得很尴尬。