Bootstrap 3.0 Affix mit Listenänderungen Breite

Question

Ich bin auf Bootstrap 3.0.0 migrieren und ich habe Probleme mit einem angebrachten Menü auf der linken Seite: Sobald es befestigt wird (nach 10px scroll), ändert sich seine Breite. In this fiddle wird es kleiner, in meiner realen Site wird es breiter und erweitert den eigentlichen Inhalt.

Es funktionierte perfekt mit Bootstrap v2.3.2. Nach der Überprüfung sieht es so aus, als würden die Listeneinträge nicht gut mit der angezeigten .affix {position: fixed;} abgespielt werden.

Irgendwelche Ideen?

LÖSUNG: auf der Basis der neuesten Kommentare ich endlich dieses JS Stück hinzugefügt haben, die es schön, ohne setzen eine feste Breite an dem daran befestigten Element fixiert:

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

Answer 1

hatte ich das gleiche Problem und dieses Problem behoben:

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

grundsätzlich in einem Fall von Resize mir den Inhalt div Breite berechnen und die Breite des daran befestigten Elements, dass ein.

Answer 2

einmal das gleiche Problem hatte (nur in BS 2.3.2).

Keine Antwort, mehr ein hack: Ich gab dem angefügten Element eine Breite. Das saugte, weil ich Breite für alle Auflösungen (RWD) einstellen musste und der Wert eigentlich Standardspaltenbreite (z. B. span4) sein sollte.

Ja: position: fixed entfernt das Element aus dem gegebenen Kontext (in Ihrem Fall col-md-3).

Answer 3

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

Answer 4

Hier ist eine andere Version:

$('.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 5

Hier ist meine Version.

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

CSS

div.affix { 
    position: fixed !important; 
} 

Answer 6

Hier ist mein HTML

  <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> 

Und das ist mein JS beheben

$(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

ich diesen Code verwenden, um die Breite des Affix zu beheben .

Das Affix erhalten die Breite seiner Eltern und überprüfen Sie diese Breite auf jeder Seite im Web. Die letzte Zeile uncommencing, führen Sie auch auf resize window Ereignis.

Answer 8

I verwendet $('.affix-element').width($('.affix-element-parent').width()).affix()

Funktioniert gut :)

Answer 9

Meine Lösung auch:

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

(.Menü-Karte ist meine klebrigen div)

Ich habe diese die Größe des Fensters für die Unterstützung:

Lassen Sie uns das Affix nehmen sind in einem übergeordneten div # Menü-Karte-Fenster aus.

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