Hat jemand einen Twitter-Bootstrap-Affix implementiert, der nur innerhalb eines bestimmten div funktioniert?

Question

Ich versuche, einige Code zu konsolidieren und die Menge an benutzerdefinierten Javascript und Jquery-Plugins, die wir derzeit verwenden, zu minimieren.

Eine Seite, die wir zur Zeit haben hat ein Gitter ähnlich wie diese:

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

Wir brauchen die div [A] zu „fixieren“, um die oben auf dem Bildschirm, sobald es übergeben wurde - aber nie überschreiten es ist Behälter div. Dieses Verhalten scheint in klebrigen Seitenleisten ziemlich häufig zu sein.

Bevor ich gehe und versuche, das Rad neu zu erfinden - ich dachte, ich würde hier fragen, ob jemand dies bereits mit Bootstrap implementiert hat. Es gibt eine Handvoll jQuery-Plugins, die das tun - aber ich habe bereits Bootstrap geladen und möchte nur die Ladezeit minimieren.

Answer 1

Ich gab eine Twitter-Bootstrap-Lösung auf und benutzte das kleinste + robusteste jQuery-Plugin, das ich finden konnte.

jQuery ScrollToFixed = 3941 Bytes, wenn minimierte https://github.com/bigspotteddog/ScrollToFixed

meine Implementierung war wie folgt:

in Website zwischengespeichert js-Datei:

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

nach Bedarf i nennen:

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