ट्विटर infinitescroll साथ चिपका दें और

Question

window.resize इस मुझे पता है पर कुछ संबंधित प्रश्नों को पढ़ने से कोई $.affix('refresh') विधि बिल्कुल ट्विटर बूटस्ट्रैप घटक चिपका के लिए उपलब्ध है कि वहाँ बूटस्ट्रैप - मेरी समस्या है, हालांकि संबंधित, यहां तक ​​कि एक अतिरिक्त कदम हो सकता है केवल एक ताज़ा करने के बीच, मुझे समझाने की कोशिश करें।

मेरे पास मानक बूटस्ट्रैप navbar वाला एक पृष्ठ है। एक बार जब मैं उपयोगकर्ता को एक्स-पिक्सेल से पहले स्क्रॉल करता हूं तो "पिन" होता है (मेरे मामले में navbar की 41px की ऊंचाई 41px पर होती है, इसलिए एफ़िक्स में बदल जाता है और .affix क्लास को .affix {top:41px} में बदलकर सभी अच्छी तरह से)

तो इस पहले प्रत्यय के लिए मैं केवल HTML-केवल विशेषताओं का उपयोग कर सकता हूं।

पेज के नीचे आगे (संक्षेप में "दूसरा पृष्ठ" माना जा सकता है) मेरे पास नेविगेशन का एक और टुकड़ा है जिसे उपयोगकर्ता को एक निश्चित स्थिति में स्क्रॉल करने के बाद "उपसर्ग" और पहले उप-नौव को प्रतिस्थापित करना चाहिए - यह देखते हुए कि सामग्री के कारण दूसरे पृष्ठ/एफ़िक्स का स्थान परिवर्तनीय है, मैं पहले पृष्ठ की ऊंचाई की गणना करने के लिए जेएस का उपयोग करता हूं और मुझे प्राप्त होने के आधार पर offset: {top:xxx} सेट करता है।

यह भी बहुत अच्छा काम करता है/जहां उम्मीद है कि उपयोगकर्ता थोड़ा नीचे स्क्रॉल करता है, पहला उप-एनवी एफ़िक्स किक करता रहता है, अगर वह स्क्रॉलिंग करता रहता है और दूसरे उप-नेव तक पहुंचता है तो वह उस पेज के नीचे आगे जाता है जो पहले इसमें जाता है और पहले स्थानांतरित करता है affix'ed उप एनएवी यहाँ से (यह वास्तव में यह दर असल की जगह नहीं है बल्कि एक उच्च z- सूचकांक के साथ ओवरले)

मैं दो मुद्दों है कि मैं के लिए एक समाधान ढूँढने में सक्षम नहीं किया गया है पर:

1. जब उपयोगकर्ता विंडो को फिर से आकार देता है तो पहले पृष्ठ की सामग्री लंबे समय तक हो जाती है जो प्रत्यय के लिए मेरे मूल ऑफ़सेट-शीर्ष आयामों को बदलती है पेज के नीचे। सबसे पहले मैंने सोचा कि .affix('refresh') पर एक साधारण कॉल समाधान होगा/निश्चित रूप से यह विधि घटक पर भी उपलब्ध नहीं है। इसके बाद, मैंने सोचा कि मैं मैन्युअल रूप से फिर से ऊंचाई की फिर से गणना कर सकता हूं और $('.my-second-affix').affix({offset: {top:x-new-offset}}); फिर से बना सकता हूं - लेकिन किसी कारण से यह बिल्कुल काम नहीं कर रहा है और मैं यह नहीं समझ सकता कि क्यों :(

2. अगला अंक इससे निपटने के लिए कि मैं अधिक से अधिक पृष्ठों को लोड करने के लिए jquery infinitescroll का उपयोग कर रहा हूं ... प्रत्येक पृष्ठ में अन्य उप-नौवें विभिन्न चरणों में हो सकती हैं जिन्हें मैं प्रत्यर्पण और प्रतिस्थापित करना चाहता हूं जो कि आखिरी प्रत्यय अब शीर्ष पर है ।

नोट मैं तो यह भी सुनिश्चित करें कि उपयोगकर्ता स्क्रॉल दूसरी दिशा वापस अगर है कि पहले चिपका उप एनएवी फिर से प्रत्यय होता Themse करना चाहते हैं एलवीएस पीछे की ओर जा रहे हैं (जो मुझे संदेह है कि वे तब तक ठीक होंगे जब तक कि एफ़िक्स ऑफसेट सही न हों)

उम्मीद है कि यह स्पष्टीकरण मेरी समस्या को उजागर करने के लिए पर्याप्त है और किसी ने या तो इससे पहले इसका समाधान किया है या समाधान के लिए कुछ मार्गदर्शन प्रदान कर सकता है । मैंने ऑफसेट को एक ऐसा फ़ंक्शन होने का प्रयास किया है जो शीर्ष से वर्तमान ऑफसेट भी लौटाता है (जैसा कि किसी अन्य प्रश्न Twitter bootstrap change affix offset में उल्लिखित है) लेकिन किसी कारण से जो अपेक्षा के अनुसार काम नहीं करता है।

किसी भी मदद की बहुत

Answer 1

सराहना की आप $('#myAffix').affix('checkPosition') कोशिश की है। यह Bootstrap3.0

Answer 2

में उपलब्ध है यदि मैं सही ढंग से समझ गया तो आपको आकार बदलने पर ऑफसेट की गणना करने की आवश्यकता होगी। इस उदाहरण की तरह इस्तेमाल कर रहा है jQuery के कुछ:

$(window).resize(calcOffset); 

    function calcOffset() 
     { 
      var location = $("myElement").offset(); 
      var top = location.top; 
     } 

Answer 3

मैं तुम्हें सिफारिश करेंगे कोड में ही इस <div class="col-md-offset-6"> की तरह में ऑफसेट का उपयोग करें। आशा है कि यह उपयोगी

Answer 4

यह सवाल बहुत पुराना है, लेकिन जब से कोई और नहीं उसका उत्तर दिया गया है ...

मैं प्रत्यय के साथ एक समान समस्या थी। यहां बताया गया है कि मैंने इसे कैसे हल किया।

$('.affixed-elements').each(function() { 
    var topOffset = 0; //calculate your top offset here 
    var $container = //Set this to the element's container; 
    $(this).affix({ 
     offset: { 
     top: function() { 
      return $container.offset().top - topOffset; 
     }, 
     bottom: function() { 
      return $('body').height() - ($container.offset().top+$container.outerHeight()); 
     } 
     } 
    }); 
}); 

उन सेटिंग विंडो के बाद भी आकार बदलता है अपने कंटेनर की सीमाओं के भीतर चिपका तत्व रखना चाहिए।