twitter-bootstrap - trigger - scrollbar bootstrap

Bootstrap Affix plugin con diseño fluido

Question

Si me gustaría usar el complemento de afijo para la barra lateral en un diseño fluido, el ancho de la barra lateral siempre cambia cuando se coloca y el diseño responsivo no funciona también.

En la documentación de Bootstrap, el complemento de afijo no se utiliza con un diseño fluido. Tal vez porque tienen el mismo problema.

¿Alguien sabe cómo hacer que funcione?

Answer 1

Debe establecer explícitamente la propiedad de ancho (o min-width) para la barra lateral. Si miras la página a la que señala Andrés, la clase "bs-docs-sidenav" tiene un ancho explícito de 228px.

Esto anula la clase ".span3" e impide que la barra lateral cambie de tamaño a medida que se desplaza.

Si elimina esa declaración de ancho explícito y desplaza la página, la barra lateral cambia de tamaño al igual que el problema que está viendo en su propia página.

Answer 2

La demostración adjunta en su sitio web es receptiva, se posiciona en la parte superior de la página como se esperaba. La position:fixed propiedad CSS position:fixed en dispositivos móviles y en pantallas más pequeñas no es una opción viable por lo que se elimina la funcionalidad.

Answer 3

Para que el afijo funcione con una barra lateral de span3 fluida, deberá agregar un poco de javascript para ajustar el ancho y administrar el tamaño.

Acabo de escribir una pequeña función javascript para hacer que esto funcione.

Echa un vistazo a este error de bootstrap.

/*
* Clamped-width. 
* Usage:
*  <div data-clampedwidth=".myParent">This long content will force clamped width</div>
*
* Author: LV
*/
$(''[data-clampedwidth]'').each(function () {
    var elem = $(this);
    var parentPanel = elem.data(''clampedwidth'');
    var resizeFn = function () {
        var sideBarNavWidth = $(parentPanel).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);
    };

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

Answer 4

$(document).ready(function () {
  setTimeout(function () {
    $(''.sidebar > *'').affix({
      offset: {
        top: function () { return $window.width() <= 980 ? 290 : 210 }
        , bottom: 270
      }
    })
  }, 100)
});

donde tu pagina es como

<div class="span2 navper">
  <ul class="nav nav-tabs nav-stacked" data-spy="affix">
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
  </ul>
</div>