2012-11-29 11 views
5

मैं कुछ कोड को मजबूत करने और कस्टम जावास्क्रिप्ट और jquery प्लगइन्स की मात्रा को कम करने की कोशिश कर रहा हूं जिसका हम वर्तमान में उपयोग कर रहे हैं। - लेकिन अधिक नहीं करने के लिएक्या किसी ने ट्विटर-बूटस्ट्रैप एफ़िक्स लागू किया है जो केवल दिए गए div के भीतर काम करता है?

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

हम div [एक] स्क्रीन के शीर्ष करने के लिए "चिपका" करने के लिए एक बार यह पारित किया गया है की जरूरत है:

एक पेज हम वर्तमान में एक ग्रिड इस के समान है यह कंटेनर div है। यह व्यवहार चिपचिपा साइडबार के साथ काफी आम लगता है।

मैं जाने से पहले और पहिया को फिर से शुरू करने की कोशिश करता हूं - मुझे लगा कि मैं यहां पूछूंगा कि अगर कोई इसे बूटस्ट्रैप के साथ पहले ही कार्यान्वित कर चुका है। ऐसे कुछ jQuery प्लगइन्स हैं जो ऐसा करते हैं - लेकिन मुझे बूटस्ट्रैप लोड हो चुका है और मैं बस लोडटाइम को कम करता हूं।

उत्तर

5

मैंने ट्विटर-बूटस्ट्रैप समाधान पर छोड़ दिया और सबसे छोटी + सबसे मजबूत jQuery प्लगइन का उपयोग किया जो मुझे मिल सकता था।

jQuery ScrollToFixed = 3941 बाइट्स जब न्यूनतम किया गया इस प्रकार https://github.com/bigspotteddog/ScrollToFixed

मेरी कार्यान्वयन था:

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> 

साइट में कैश की गई फ़ाइल .js

संबंधित मुद्दे