Has anyone implemented a twitter-bootstrap affix that only works within a given div?

Question

I'm trying to consolidate some code and minimize the amount of custom javascript and jquery plugins we're currently using.

A page we currently have has a grid similar to this:

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

We need the div [A] to "affix" to the top of the screen once it has been passed - but to never exceed it's container div. This behavior seems to be fairly common along sticky sidebars.

Before I go and try to reinvent the wheel - I figured I'd ask here if anyone has already implemented this with Bootstrap. There are a handful of jQuery plugins that do this -- but I've already got Bootstrap loaded and would rather i just minimize loadtime.

Answer 1

I gave up on a twitter-bootstrap solution and used the smallest + most robust jquery plugin i could find.

jQuery ScrollToFixed = 3,941 bytes when minified https://github.com/bigspotteddog/ScrollToFixed

my implementation was as follows:

cached into site .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() )
    });
};

as needed i call:

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