Bootstrap 3.1.0：词缀太长答案

【问题标题】：Bootstrap 3.1.0: affix too longBootstrap 3.1.0：词缀太长
【发布时间】：2014-02-11 01:56:14
【问题描述】：

我正在使用 Bootstrap 3.1.0。当“词缀”对于视口来说太长时，它会被切断，永远不会显示底部项目。

是否有可能让 Bootstrap 的词缀表现得让用户仍然可以从上到下滚动整个词缀？

有问题的例子：

<div class="container">
    <div class="row">

        <div class="col-md-3">
            <div class="list-group" id="sidebar">
                <a href="#" class="list-group-item">Long</a>
                <a href="#" class="list-group-item">list</a>
                <a href="#" class="list-group-item">with</a>
                <a href="#" class="list-group-item">many</a>
                <a href="#" class="list-group-item">entries</a>
                ...
                <a href="#" class="list-group-item">29. Last</a>
            </div>
        </div>

        <div class="col-md-9">
          ... regular content    
        </div>

    </div>
</div>

I hope my jsFiddle exemplifies this problem.

【问题讨论】：

我不知道您的特定用例，但实际上是否完全有必要在词缀中包含比视口大的那么多项目？在您的示例中，如果我要加载具有较小宽度视口的页面，那么我必须滚动浏览那么多元素，因为侧边栏会在页面顶部加载。我觉得如果你有可扩展的部分，你会得到更好的结果和用户体验，并尝试最小化侧边栏的大小。

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

希望对你有帮助：

只需添加overflow-y

Jsfiddle : http://jsfiddle.net/Ja3XT/1/

添加了 CSS：

#sidebar{
 max-height: 100%;
 overflow-y: auto;   
}

评论后更新：

小提琴： http://jsfiddle.net/F4FZL/1/

JS：

$('#sidebar').affix({
    offset: {
        top:100,
        bottom:0
    }
});


$('#sidebar').on('affixed.bs.affix', function(){
    $(this).removeAttr('style');
});

【讨论】：

谢谢，这已经为我指明了一个好的方向。虽然我注意到当 content 部分 比 affix 部分 短时，您在jsfiddle.net/Ja3XT/1 的解决方案可能会遇到可用性问题。这是 jsFiddle 示例这个问题（至少在 Chrome 33 和 IE 11 中存在问题）：jsfiddle.net/Abdull/F4FZL。向下滚动时，窗口会晃动并跳回上半部分，从不显示底部附加部分。

【解决方案2】：

我有同样的问题。我花了几个小时，最后我写了以下解决方案：

$('#sidebar').on('affix.bs.affix', function (e) {
    var $this = $(this),
        affix = $this.data('bs.affix'),
        offset = affix.options.offset,
        offsetBottom = offset.bottom;

    if (typeof offset != 'object') {
        offsetBottom = offset;
    }

    if (typeof offsetBottom == 'function') {
        offsetBottom = offset.bottom($this);
    }

    if ($this.outerHeight() + $this.offset().top + offsetBottom === Math.max($(document).height(), $(document.body).height())) {
        e.preventDefault();
    }
});

您可以在http://jsfiddle.net/F4FZL/10/ 看到代码并在https://jsfiddle.net/F4FZL/10/embedded/result/ 玩演示。

希望这些信息会有所帮助。

【讨论】：

【解决方案3】：

在我的例子中，我在左侧有一个很长的侧边栏，我希望它可以随时滚动。对我来说，该解决方案比上述解决方案更容易：

$('[data-spy="affix"]').on('affix.bs.affix', function (e) {
    e.preventDefault();
    return;
});

【讨论】：