सूची के साथ बूटस्ट्रैप 3.0 एफ़िक्स चौड़ाई

Question

मैं बूटस्ट्रैप 3.0.0 में माइग्रेट कर रहा हूं और मुझे बाईं ओर एक एफ़िक्स्ड मेनू के साथ समस्याएं आ रही हैं: जैसे ही यह संलग्न हो जाता है (10px स्क्रॉल के बाद), इसकी चौड़ाई बदल जाती है। this fiddle में यह छोटा हो जाता है, मेरी वास्तविक साइट में यह व्यापक हो जाता है और वास्तविक सामग्री पर फैलता है।

यह बूटस्ट्रैप v2.3.2 के साथ पूरी तरह से काम किया। यह जांचने के बाद ऐसा लगता है कि सूची आइटम .affix {position: fixed;} के साथ अच्छी तरह से नहीं खेलते हैं।

कोई विचार?

समाधान:

$(function() { 
    var $affixElement = $('div[data-spy="affix"]'); 
    $affixElement.width($affixElement.parent().width()); 
}); 

Answer 1

मैं एक ही समस्या थी और इस के साथ तय हो गई:

$(window).resize(function() { 
       $('#category-nav.affix').width($('#content').width()); 
      }); 

मूल रूप से आकार परिवर्तन की एक घटना में मैं सामग्री div की चौड़ाई की गणना और कि चिपका तत्व की चौड़ाई निर्धारित किया है।

$('.sitebar .affix-top').width($('.sitebar .affix-top').width()); 
$(window).resize(function() { 
    $('.sitebar .affix').width($('.sitebar .affix-top').width()); 
}); 
$(window).scroll(function() { 
    $('.sitebar .affix').width($('.sitebar .affix-top').width()); 
}); 

Answer 2

एक बार (एक ही समस्या थी ही बी एस में: नवीनतम टिप्पणियाँ मैं अंत में इस टुकड़े जो इसे चिपका तत्व करने के लिए एक निश्चित चौड़ाई सेट किए बिना अच्छी तरह से ठीक करता जेएस जोड़ लिया है के आधार पर 2.3.2)।

कोई उत्तर नहीं, हैक है: मैंने एफ़िक्स्ड तत्व को चौड़ाई दी है। वह चूसा, क्योंकि मुझे सभी संकल्पों (आरडब्ल्यूडी) के लिए चौड़ाई निर्धारित करनी थी और वास्तव में मान मानक कॉलम चौड़ाई (उदा। एसपी 4) होना चाहिए।

हां: position: fixed दिए गए संदर्भ से तत्व लेता है (आपके मामले में col-md-3)।

Answer 3

$(window).scroll(function() { 
    $('#secondary .widget-area.affix').width($('#secondary').width()); 
}); 

Answer 4

यहाँ एक और संस्करण है।

var fixAffixWidth = function() { 
    $('[data-spy="affix"]').each(function() { 
    $(this).width($(this).parent().width()); 
    }); 
} 
fixAffixWidth(); 
$(window).resize(fixAffixWidth); 

सीएसएस

div.affix { 
    position: fixed !important; 
} 

Answer 5

यहाँ मेरी संस्करण है:

Answer 6

यहाँ मेरी एचटीएमएल

  <div class="sidebar-nav"> 
       <div class="navbar navbar-default" role="navigation"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#committees-navbar"> 
          <span class="sr-only"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <span class="visible-xs navbar-brand">Committees</span> 
        </div> 
        <div id="committees-navbar" class="navbar-collapse collapse"> 
         <ul class="nav navbar-nav nav-stacked" data-spy="affix" data-offset-top="250"> 
          <li class="col-xs-12"><a ng-click="scrollTo('boardCommittee')">BOARD OF DIRECTORS</a></li> 
          <li class="col-xs-12"><a ng-click="scrollTo('madrasaCommittee')">MADRASATUL JAMALIYAH</a></li> 
          <li class="col-xs-12"><a ng-click="scrollTo('shababCommittee')">SHABAB</a></li> 
          <li class="col-xs-12"><a ng-click="scrollTo('bwaCommittee')">BURHANI WOMEN</a></li> 
          <li class="col-xs-12"><a ng-click="scrollTo('tncCommittee')">TAISEER UN NIKAH</a></li> 
          <li class="col-xs-12"><a ng-click="scrollTo('fmbCommittee')">FAIZUL MAWAIDUL BURHANIYAH</a></li> 
          <li class="col-xs-12"><a ng-click="scrollTo('websiteCommittee')">WEBSITE</a></li> 
          <li class="col-xs-12"><a ng-click="scrollTo('tadfeenCommittee')">TADFEEN</a></li> 
         </ul> 
        </div><!--/.nav-collapse --> 
       </div> 
      </div> 

है और ये मेरे जे एस ठीक

$(function() { 
    var resize = function() { 
     var sidebarNav = $(".sidebar-nav"); 
     var sidebarNavAffix = $(".sidebar-nav .affix"); 
     if (sidebarNavAffix.length && (sidebarNavAffix.width() !== sidebarNav.width())) { 
      sidebarNavAffix.width(sidebarNav.width()); 
     } 
    } 

    $(window).on({"scroll" : resize, "resize" : resize}); 
}); 

Answer 7

मैं इस कोड का उपयोग प्रत्यय की चौड़ाई तय करने के लिए है ।

$(document).on('affixed.bs.affix',function(e){ 
    $('.affix').each(function(){ 
     var elem = $(this); 
     var parentPanel = $(elem).parent(); 
     var resizeFn = function() { 
      var parentAffixWidth = $(parentPanel).width(); 
      elem.width(parentAffixWidth); 
     };  

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

एफ़िक्स अपने माता-पिता की चौड़ाई प्राप्त करता है और वेब पर प्रत्येक स्क्रॉल पर चौड़ाई की जांच करता है। अंतिम पंक्ति को अपूर्ण करना, आकार बदलें विंडो ईवेंट पर भी निष्पादित करें।

Answer 8

मैं $('.affix-element').width($('.affix-element-parent').width()).affix()

इस्तेमाल किया अच्छी तरह से काम करता है :)

Answer 9

मेरे साथ ही समाधान:

$('.menu-card').affix(); 
$(document).on('affix.bs.affix', '.menu-card', function() { 
    $(this).width($(this).width()); 
}); 

(।

के प्रत्यय मान एक माता पिता div # मेनू कार्ड फलक में हैं दो: मेनू कार्ड मेरी चिपचिपा div)

मैं खिड़की का आकार बदलने के समर्थन के लिए इस जोड़ी गई है।

$(window).resize(function() { 
    var parentSize = $('#menu-card-pane').width(); 
    $('.affix').each(function() { 
     var affixPadding = $(this).innerWidth() - $(this).width(); 
     $(this).width(parentSize - affixPadding); 
    }); 
});