twitter-bootstrap - 是否有人实现了仅在给定 div 中有效的 twitter-bootstrap 词缀？

Question

我正在尝试整合一些代码并尽量减少我们当前使用的自定义 javascript 和 jquery 插件的数量。

我们目前拥有的一个页面有一个类似于这样的网格：

+--------------------+
|                    |
+--------------+-----+
|              | [A] |
|              |     |
|              |     |
|              |     |
+---------+----+-----+
|         |          |
+---------+----------+

我们需要 div [A] 在它通过后“附加”到屏幕顶部 - 但永远不要超过它的容器 div。这种行为在粘性侧边栏上似乎相当普遍。

在我去尝试重新发明轮子之前 - 我想我会在这里问是否有人已经用 Bootstrap 实现了这个。有一些 jQuery 插件可以做到这一点——但我已经加载了 Bootstrap，我希望我只是最小化加载时间。

Answer 1

我放弃了 twitter-bootstrap 解决方案，并使用了我能找到的最小 + 最强大的 jquery 插件。

jQuery ScrollToFixed = 3,941 字节时缩小https://github.com/bigspotteddog/ScrollToFixed

我的实现如下：

缓存到站点 .js 文件中：

function scrollwithin( scroller , marginTop ) {
    marginTop = typeof marginTop !== 'undefined' ? marginTop : 10;
    var scrollmax = $( '#' + scroller.attr('data-scrollmax') );
    scroller.scrollToFixed({
        marginTop: marginTop  ,
        limit: ( ( scrollmax.offset().top + scrollmax.outerHeight() ) - scroller.outerHeight() )
    });
};

根据需要我打电话：

<div>
   <div id="a">
       <div id="a-scrollwithin">Long Column</div>
       <div id="a-scroller" data-scrollwithin="a-scrollwithin">Scrolling element</div>
   </div>
</div>
<script>
    $(document).ready(function() {
        scrollwithin($('#a-scroller'),10);
    }
<script>