Có ai đã triển khai một bản đính kèm twitter-bootstrap chỉ hoạt động trong một div đã cho không?

Question

Tôi đang cố gắng hợp nhất một số mã và giảm thiểu số lượng plugin javascript và jquery tùy chỉnh mà chúng tôi hiện đang sử dụng.

Một trang chúng tôi hiện có có một mạng lưới tương tự như sau:

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

Chúng ta cần div [A] để "đóng" để phía trên cùng của màn hình khi nó đã được thông qua - nhưng không bao giờ vượt quá đó là div container. Hành vi này có vẻ khá phổ biến dọc theo các thanh bên dính.

Trước khi tôi đi và cố gắng phát minh lại bánh xe - tôi đã hình dung rằng tôi sẽ hỏi ở đây nếu có ai đã triển khai điều này với Bootstrap. Có một số ít các plugin jQuery làm điều này - nhưng tôi đã tải Bootstrap và thay vào đó tôi chỉ giảm thiểu thời gian tải.

Answer 1

Tôi đã từ bỏ giải pháp twitter-bootstrap và sử dụng plugin jquery nhỏ nhất + mạnh mẽ nhất mà tôi có thể tìm thấy.

jQuery ScrollToFixed = 3941 byte khi minified https://github.com/bigspotteddog/ScrollToFixed

thực hiện của tôi là như sau:

cache vào trang web .js file:

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()) 
    }); 
}; 

khi cần tôi gọi:

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