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>