有没有人实现了一个只能在给定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>