Qualcuno ha implementato un affisso twitter-bootstrap che funziona solo all'interno di un dato div?

Question

Sto cercando di consolidare un po 'di codice e ridurre al minimo la quantità di plug-in personalizzati javascript e jquery che stiamo utilizzando.

Una pagina abbiamo attualmente ha una griglia simile a questo:

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

abbiamo bisogno del div [A] per "apporre" al superiore dello schermo una volta che è stato passato - ma per non superare mai è div contenitore. Questo comportamento sembra essere abbastanza comune lungo barre laterali appiccicose.

Prima di andare a provare a reinventare la ruota, ho pensato di chiedere se qualcuno l'ha già implementato con Bootstrap. Ci sono una manciata di plugin jQuery che fanno questo - ma ho già caricato Bootstrap e preferisco minimizzare il tempo di caricamento.

Answer 1

Mi sono arreso su una soluzione twitter-bootstrap e ho utilizzato il più piccolo e più robusto plugin jquery che potessi trovare.

jQuery ScrollToFixed = 3.941 byte quando minified https://github.com/bigspotteddog/ScrollToFixed

mia implementazione è stata la seguente:

memorizzati nella cache nel sito di file .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()) 
    }); 
}; 

in base alle esigenze che io chiamo:

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