बूटस्ट्रैप 3 प्रत्यय प्लगइन क्लिक बग

Question

टी एल; डॉ: यहाँ एक बेला क्लिक करें या बग देखने के लिए स्क्रॉल है,: http://jsfiddle.net/Tetaxa/6cC9w/

मैं दो स्तंभों के साथ एक पृष्ठ है पर सही एक चिपका div (उपकरण पट्टी) है और बाईं ओर कुछ सामग्री है। जब सामग्री टूलबार से अधिक होती है तो यह बहुत अच्छा काम करता है। हालांकि, जब टूलबार अधिक होता है, तो मुझे कुछ अजीब व्यवहार मिलता है। स्क्रॉल पर क्लिक करें और क्लिक करें, टूलबार के चिपकने वाला राज्य टॉगल करता है और सामग्री गिर जाती है।

<div class="row"> 
    <div class="col-xs-8"> 
    <p>Lorem ipsum dolor</p> 
    </div> 
    <div class="col-xs-4"> 
     <div class="affixed-div"> 
      Affixed 
     </div> 
    </div> 
</div> 

यहाँ मेरी जावास्क्रिप्ट है:

यहाँ प्रासंगिक एचटीएमएल है। टूलबार को नीचे की सामग्री पर जाने से रोकने के लिए नीचे गणना की जाती है।

.affix { 
    top: 0; 
} 

.affix-bottom { 
    position: relative; 
} 

मैं गलत यहाँ कुछ कर रहा हूँ:

var div = $('.affixed-div'); 
var row = div.closest('.row'); 

div.affix({ 
    offset: { 
     bottom: $(document).height() - row.offset().top - row.height(), 
     top: div.offset().top 
    } 
}); 

और यहाँ कस्टम सीएसएस है? क्या यह एक बग है या इरादे से काम कर रहा है? क्या मुझे पंक्ति की ऊंचाई मैन्युअल रूप से जांचनी है और सामग्री को उच्च होने पर टूलबार को केवल प्रत्ययित करना है या इससे बचने का एक बेहतर तरीका है? क्या मुझे एक बग रिपोर्ट दर्ज करनी चाहिए?

Answer 1

का समाधान नहीं यह शायद एक बूटस्ट्रैप बग है। बग अभी भी मौजूद है।

बग बूटस्ट्रैप प्लगइन Affix.js में है, Affix.prototype.getState तरीकों

if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false 

इसे ठीक करने के लिए। नीचे कोड को प्रतिस्थापित करें।

if (offsetTop != null && this.affixed == 'top') return scrollTop <= offsetTop ? 'top' : false 

यह सब मेरी गलत सोचा

Answer 2

मेरे पास लगभग एक ही बग है। क्लास एफ़िक्स-टॉप को क्लिक पर एफ़िक्स क्लास द्वारा प्रतिस्थापित किया जा रहा है। फिर से क्लिक करें और एफ़िक्स-टॉप फिर से दिखाई देता है। मेरे मामले में यह affix-bottom से संबंधित है।

वर्ष बग वास्तव में अभी तक https://github.com/twbs/bootstrap/issues/4647#issuecomment-8769678

Answer 3

मुझे लगता है कि कहीं न कहीं जब ऑफसेट जो राज्य को टॉगल करता है शून्य है चिपका दें स्थापित करने के लिए एक सशर्त जांच होती है हो सकता है। बस एक पिक्सेल के लिए नीचे/शीर्ष ऑफसेट बदलें और यह काम करेगा। आपके उदाहरण में मैंने इस तरह के ऑफसेट को बदल दिया:

bottom: $(document).height() - row.offset().top - row.height() - 1 

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

Answer 4

आशा है कि यह आपकी समस्या को ठीक करे।

var _toolbar = $('.toolbar'); 
    var _content = $('.content'); 
    _toolbar.on('affix.bs.affix', function() { 
     if (_toolbar.height() > _content.height()) { 
      return false; 
     } 
    }); 

नोट: affix.bs.affix इस घटना को आग से ठीक पहले तत्व चिपका दिया गया है।

Answer 5

समस्या तब होती है जब विंडो शीर्ष स्क्रॉल स्थिति में होती है।अगर खिड़की वास्तव में स्क्रॉल है

$('#nav').on('affix.bs.affix', function(){ 
    if(!$(window).scrollTop()) return false; 
}); 

यह चेक: जैसा कि एक प्रत्यय केवल एक फर्क करना चाहिए एक बार हम वास्तव में स्क्रॉल कर रहे हैं मैं अपने नेवबार के लिए निम्न (ID=nav, अपने नेवबार को यह अनुकूलन) इस मुद्दे को ठीक करने के लिए लागू । मैं एक सीडीएन से बूटस्ट्रैप फ़ाइलों को लोड कर रहा हूं, इसलिए मूल संपादन एक विकल्प नहीं था।

उसके जवाब affix.bs.affix में @kolunar द्वारा बताया गया है तत्व से पहले तुरंत निकाल दिया जाता है चिपका है, इसलिए यदि यह सही ठीक है हम क्या हो रहा है जब हम false