Estoy migrando a bootstrap 3.0.0 y estoy teniendo problemas con una pegada menú a la izquierda: tan pronto como esté colocado (después de 10px de desplazamiento), y su anchura de cambios. En este violín se hace más pequeña, en mi sitio real que se ensancha y se expande en el contenido real.

Funcionó perfectamente con bootstrap v2.3.2. Después de comprobar lo que se parece a los elementos de la lista no juegan bien con el .affix {position: fixed;} que aparece.

Alguna idea?

SOLUCIÓN: con base en los últimos comentarios por fin he añadido este JS pieza que lo arregla muy bien sin tener que establecer un ancho fijo a la fijada elemento:

$(function() {
    var $affixElement = $('div[data-spy="affix"]');
    $affixElement.width($affixElement.parent().width());
});
  • En realidad tiene el mismo comportamiento sin una lista (con elementos de formulario, por ejemplo)
  • Afijo ancho de la cuestión y algunas de las revisiones si cualquier persona interesada.
  • muy bueno, gracias! Por fin puedo quitar el hack de mi código y tener una solución adecuada en el lugar (esperemos que añadiremos a v3.1)
InformationsquelleAutor Davor | 2013-09-08

9 Comentarios

  1. 11

    Tuve el mismo problema y lo solucionó con esto:

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

    básicamente en un evento de cambiar el tamaño de calcular el contenido del div de ancho, y la anchura de pegada elemento que.

    • Sólo el evento de cambio de tamaño no me funciona (Primefaces/Bootsfaces). Pero el uso de los eventos de desplazamiento (por debajo de soluciones) hizo el truco.
  2. 3

    Aquí otra versión:

    $('.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());
    });
  3. 3

    Aquí está mi versión.

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

    CSS

    div.affix {
        position: fixed !important;
    }
  4. 1

    tenía el mismo problema una vez (sólo en BS 2.3.2).

    No una respuesta, más un hack: me dio la pegada elemento de anchura. Eso nos preocupa, porque he tenido que ajustar el ancho para todas las resoluciones (RWD) y de hecho, el valor debe ser el ancho de columna estándar (por ejemplo .span4).

    Sí: position: fixed toma el elemento del contexto dado (en su caso col-md-3).

    • Gracias – se hizo el trabajo, pero bastante horrible hack con un montón de preguntas de los medios para hacerla sensible-ish… Esperemos Bootstrap parches en algún momento!
  5. 1

    Puedo usar este código para fijar la anchura de la afijo.

    $(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);
        });
    });

    El afijo obtener el ancho de su padre y comprobar que la anchura en cada desplazamiento de la web. Quitando la última línea, ejecutar demasiado en cambiar el tamaño de la ventana de evento.

  6. 1

    He utilizado $('.affix-element').width($('.affix-element-parent').width()).affix()

    Funciona bien 🙂

  7. 1

    Mi solución:

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

    (.menú de la tarjeta es de mi pegajosa div)

    He añadido esto para apoyar a la ventana de cambio de tamaño:

    Vamos a suponer que la coloque en un padre div #menu-tarjeta-panel.

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

    Aquí está mi código 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>

    Y este es mi JS revisión

    $(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});
    });

Dejar respuesta

Please enter your comment!
Please enter your name here