jquery बूटस्ट्रैप 3 एफ़िक्स विधि के लिए गतिशील डेटा-ऑफ़सेट मान कैसे प्राप्त करें




css twitter-bootstrap (6)

मैं Bootstraps प्रलेखन ( http://getbootstrap.com/javascript/#affix ) में वर्णित एफ़िक्स विधि का उपयोग करना चाहता हूं, हालांकि उस स्क्रॉल के बाद मैं जिस पृष्ठ पर स्क्रॉल करता हूं उसके बाद नेविबार अलग ऑफसेट हो सकता है इसके ऊपर की सामग्री के आधार पर मूल्य।

यहां navbar का एक उदाहरण दिया गया है:

<div class="navbar navbar-default" data-spy="affix" data-offset-top="200">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</div>

जैसा कि आप देख सकते हैं, data-offset-top वर्तमान में 200 पर सेट है। यह ठीक काम करता है यदि ऊपर की सामग्री 200px लंबा है, लेकिन ऊपर की सामग्री गतिशील है और इसलिए इस navbar के ऊपर की ऊंचाई हमेशा समान नहीं है। data-offset-top गतिशील होने के लिए मैं कैसे बना सकता हूं?

मुझे अनुमान है कि मुझे इसे करने का जावास्क्रिप्ट तरीका उपयोग करना होगा, लेकिन मुझे यकीन है कि मैं निश्चित हूं।


थॉमस रेगी का डेटा-स्मार्ट-एफ़िक्स मेरे लिए कुछ कोने मामलों में काम नहीं करता था (जब दस्तावेज़ का आकार बदलता था, या जब एफ़िक्स्ड कॉलम बहुत लंबा था)। लेकिन इसने मुझे एक साधारण विचार दिया: चिपकने वाली सामग्री से पहले एक खाली तत्व जोड़ें, और ऑफ़सेट प्राप्त करने के लिए इसका उपयोग करें। आकार बदलते समय अच्छी तरह से काम करता है।

जब मैं उस पर था, तब भी मैंने तत्व की चौड़ाई को मूल अभिभावक में प्राकृतिक चौड़ाई के रूप में सेट किया था। मेरा समाधान यहाँ है:

$('[data-affix-after]').each( function() {
  var elem = $(this);
  var parent_panel = elem.parent();
  var prev = $( elem.data('affix-after') );

  if( prev.length != 1 ) {
    /* Create a new element immediately before. */
    prev = elem.before( '<div></div>' ).prev();
  }

  var resizeFn = function() {
      /* Set the width to it's natural width in the parent. */
      var sideBarNavWidth = parent_panel.width()
          - parseInt(elem.css('paddingLeft'))
          - parseInt(elem.css('paddingRight'))
          - parseInt(elem.css('marginLeft'))
          - parseInt(elem.css('marginRight'))
          - parseInt(elem.css('borderLeftWidth'))
          - parseInt(elem.css('borderRightWidth'));
      elem.css('width', sideBarNavWidth);

      elem.affix({
          offset: {
              top: prev.offset().top + prev.outerHeight(true),
              bottom: $('body>footer').outerHeight(true)
          }
      });
  };

  resizeFn();
  $(window).resize(resizeFn);
});

एचटीएमएल जो इसके साथ जाता है वह है:

<div id='before-affix'></div><!-- leave this empty -->
<div data-affix-after='#before-affix'>
    Put content to affix here.
</div>

या

<div data-affix-after='#create'><!-- any ID that doesn't exist -->
    Put content to affix here.
</div>

आवश्यक सीएसएस है:

.affix { top: 0px },
.affix-bottom { position: absolute; }

अगर आप एफ़िक्स को अक्षम करना चाहते हैं (उदाहरण के लिए जब सही कॉलम स्टैक्ड किया जाता है), तो सीएसएस का उपयोग करें:

.affix, .affix-bottom { position: static; }

उचित मीडिया क्वेरी के अंदर।

सैनिक


आप navbar ऊपर गतिशील सामग्री ऊंचाई प्राप्त करने के लिए jQuery का उपयोग कर सकते हैं। उदाहरण के लिए:

$('#nav').affix({
      offset: {
        top: $('header').height()
      }
}); 

वर्किंग डेमो: http://bootply.com/69848

कुछ मामलों में, ऑफसेट.बॉटम को यह भी निर्धारित करने के लिए गणना की जानी चाहिए कि तत्व "un-affix" कब करें। यहां एफ़िक्स-तल का एक उदाहरण दिया गया है


एक विचार के लिए Thnx ThomasReggi। लेकिन लिखने के लिए और अधिक सही हो सकता है:

$(this).data('bs.affix').options.offset.top = $(this).offset().top

मेरे जैसे उन लोगों के लिए जिन्हें नीचे मूल्य की आवश्यकता होती है जो समान रूप से लिखते हैं।

बीटीडब्ल्यू भी मुझे लगता है कि इसे सेटटाइमआउट (कुछ हद तक बहस की तरह) पर आधारित सजावट में लपेटें।


मैं इस काम के तरीके से बिल्कुल निराश था, हर बार कुछ कस्टम गणना कर रहा था और वांछित प्रत्यय के ऊपर तत्वों की ऊंचाइयों को ऑफसेट बना रहा था।

यहां पर सबसे अच्छा प्रत्यय है।

सामान्य बूस्ट्रैप एफ़िक्स वस्तुओं को प्राकृतिक ऑफ़सेट शीर्ष स्थिति में नहीं लेता है, आपको मैन्युअल रूप से इसे एक विशेषता के रूप में पास करना होगा। यह उस पर ख्याल रखता है, और विंडो आकार बदलने के ऑफसेट टॉप के लिए खाते हैं।

var $attribute = $('[data-smart-affix]');
$attribute.each(function(){
  $(this).affix({
    offset: {
      top: $(this).offset().top,
    }
  })
})
$(window).on("resize", function(){
  $attribute.each(function(){
    $(this).data('bs.affix').options.offset.top = $(this).offset().top
  })
})

मैंने इसे कोड समीक्षा पर भी पोस्ट किया।

अपने प्रत्यय तत्व में data-smart-affix विशेषता जोड़ने के लिए मत भूलना

इस नमूना कोड को आजमाएं: https://jsfiddle.net/NabiKAZ/qyrauogw/
(इस नमूने में, लाल खंड की ऊंचाई खिड़की की भिन्न चौड़ाई में 100px या 200px या 300px हो सकती है, इसलिए स्क्रॉल किए जाने पर data-offset-top को अलग करने की आवश्यकता है।)


मुझे इससे पहले बहुत परेशानी हो रही थी, और किसी कारण से मुझे अन्य समाधानों को हल करने का सुझाव नहीं मिला। मैं बूटस्ट्रैप और JQuery के लिए अपेक्षाकृत नया हूं, इसलिए शायद मैं कुछ गड़बड़ कर रहा था जिसे मैं पकड़ नहीं रहा था। भले ही, मुझे एक समाधान मिला जो वास्तव में अच्छी तरह से काम करता है, हालांकि यह बूटस्ट्रैप के इरादे की कार्यक्षमता का उपयोग कड़ाई से नहीं बोलता है। मैंने अपना #thisElement.affix {top: desiredFixedPosition;} सीएसएस बरकरार रखा है, लेकिन # इस एलीमेंट के HTML टैग से data-spy और data-offset-top विशेषताओं से छुटकारा पा लिया है। मैंने JQuery में इसे हार्ड-कोड किया:

var newAffix = function() {
    if($("otherElementsAboveThisElement").height() <= $(window).scrollTop()) {
        $("#thisElement").addClass("affix");
    } else {
        $("#thisElement").removeClass("affix");
    }
}

$(document).ready(function() {
    $(window).resize(newAffix);
    $(window).scroll(newAffix);
}

जहां तक ​​मैंने परीक्षण किया है, यह इस बात पर ध्यान दिए बिना काम करता है कि आप पृष्ठ का कितना आकार बदलते हैं या स्क्रॉल करते हैं, और यदि आप इसे $(document).ready() में कॉल करते हैं, तो आप रचनात्मक हो जाते हैं $(document).ready() फ़ंक्शन में आप मेनू भी बना सकते हैं ऊंचाई एनिमेशन के दौरान सही स्थिति। जैसा कि कहा गया है, यह तकनीकी रूप से पूरी तरह से "बूटस्ट्रैप अनुमोदित" समाधान नहीं है, लेकिन यह बूटस्ट्रैप साइट में पर्याप्त रूप से पर्याप्त एकीकृत करता है कि इसे कुछ के लिए काम करना चाहिए :)


उपरोक्त स्काई सही है और ऐसा करने का कोई बेहतर तरीका नहीं है। "देशी" बूटस्ट्रैप के साथ एकमात्र संभावित समाधान एक जावास्क्रिप्ट कॉल के साथ एफ़िक्स विकल्पों को संलग्न करना है (जैसा कि ऊपर बताया गया है https://.com/a/18702972/2546679 )।

समान प्रभाव प्राप्त करने के लिए data-offset विशेषता का उपयोग करना विशेष रूप से संभव नहीं है (भले ही यह अधिक सुविधाजनक होगा, और यहां तक ​​कि अगर http://getbootstrap.com/2.3.2/javascript.html#affix पर एफ़िक्स के लिए प्रलेखन http://getbootstrap.com/2.3.2/javascript.html#affix आशा करता है कि कोई ऐसा कर सकता है)।

तो कोई लिख सकता है

data-offset='{"top":42}'

लेकिन किसी को लिखने की अनुमति नहीं है उदाहरण:

data-offset='{"top":$("#banner").height()}'

कारण यह है कि डेटा विशेषताएँ JQuery .data() API के माध्यम से पार्स की जाती हैं जो केवल शुद्ध JSON मानों को पार्स करने की अनुमति देती है, https://api.jquery.com/data/





affix