javascript - scrolling - scrollbar bootstrap

Twitter Bootstrap Affix-¿Cómo pegarse al fondo?

Question

He leído la documentación y siento que estoy haciendo exactamente lo que muestran en sus ejemplos. Sin embargo, cuando lo intento, no puedo hacer que esto funcione. Me gustaría que funcione de manera similar a los documentos. Se convierte en position:fixed después de desplazarse más allá del encabezado, y luego, una vez que toca el pie de página, se convierte en position:absolute y se pega al fondo.

DEMO: http://jsfiddle.net/uvnGP/1/

JS

$("#account-overview-container").affix({
    offset: {
        top: $("header").outerHeight(true),
        bottom: $("footer").outerHeight(true)
    }
});

HABLAR CON DESCARO A

#account-overview-container {
    &.affix{
        top:10px;
        bottom:auto;
    }

    &.affix-top{
        //Do I need this?
    }

    &.affix-bottom{
        position:absolute;
        top:auto;
        bottom:140px;
    }
}

Answer 1

¡La solución de Paco Rivera funciona! Pero no de la forma que pretendía. Wat realmente elimina el problema de parpadeo (saltar) en esta línea:

.on(''affix.bs.affix'', function () { // before affix
    $(this).css({
        ''width'': $(this).outerWidth()  // variable widths
    });
})

Lo suficiente como para que ni siquiera tengas que configurar el ancho CSS. Sólo leer este parámetro ya ayuda. Simplifiqué el código al siguiente fragmento y aún funciona:

.on(''affix.bs.affix'', function () { // before affix
    $(this).width();
});

Lo mantendré así hasta la próxima versión del complemento Bootstrap Affix, donde espero que lo solucionen de una vez por todas.

Answer 2

Establecer position: absolute para .affix-top y .affix-bottom , y position: fixed para .affix .

Según el doc oficial.

Answer 3

Establezca la posición del menú en la parte inferior usando la propiedad de posición y superior, inferior y use la demostración aquí http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Affix.php

Answer 4

Hay algunos cambios en su código, pero la solución se ajusta a la altura variable de encabezado y pie de página, ancho de respuesta y se puede cambiar para el encabezado fijo.

Aqui esta el link

http://jsfiddle.net/uvnGP/131/

El problema era que cuando el afijo tocaba la parte inferior, había un estilo css superior e inferior agregado a su contenedor (#sidebar), la forma de solucionarlo es restablecer ese estilo inferior a automático , de esa manera solo el estilo superior acto sobre tu contenedor

Aquí está el código:

var headerHeight = $(''header'').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $(''footer'').innerHeight();
$(''#account-overview-container'').affix({
    offset: {
        top: headerHeight,
        bottom: footerHeight
    }
}).on(''affix.bs.affix'', function () { // before affix
    $(this).css({
        /*''top'': headerHeight,*/    // for fixed height
            ''width'': $(this).outerWidth()  // variable widths
    });
}).on(''affix-bottom.bs.affix'', function () { // before affix-bottom
    $(this).css(''bottom'', ''auto''); // THIS is what makes the jumping
});

Answer 5

Hice este trabajo a través de un proceso de prueba y error, pero esto es lo que funcionó para mí.

JS

$(document).ready(function() {
var SidebarTop = $(''#your-affix'').offset().top - x; //adjust x to meet your required positioning
    SidebarBottom = $(''.site-footer'').outerHeight() + x;

    $(''#your-affix'').affix({
        offset: {
        top: SidebarTop,
        bottom: SidebarBottom
        }
    });
});

CSS

#your-affix.affix {
    top: boo px; //the px from top of the window where you want your sidebar
                 //be when you scroll
    width: foo px; //your sidebar width
  }
#your-affix.affix-bottom {
    position: absolute;
    width: foo px; //your sidebar width
}

Después de este código, mi barra lateral se "desasigna" cuando llega al pie de página. Y deja de saltar a la parte superior del sitio cuando alcanza la opción de desplazamiento inferior.

Answer 6

Me las arreglé para hacer que funcionara en mi aplicación, es una cuestión de hacer que el estilo del fondo sea consistente con la parte inferior que se pasó a la llamada de afijo. Si su pie de página tiene una altura fija y el padre más cercano es el cuerpo, entonces se trata de pasar el mismo valor para ambos. Eso funciona lo suficientemente bien para los documentos de Bootstrap 2.3 como se ve here y here .

-

Ahora suponiendo que no tiene un pie de página de altura fija:

Paso 1: Padre posicionado más cercano (padre desplazado)

En primer lugar, utilizamos la posición absoluta para pegarla en la parte inferior, pero como su padre más cercano será el cuerpo (que incluye su pie de página), no tiene un valor fijo para la parte inferior. Para solucionarlo, tenemos que hacer un nuevo padre posicionado que incluya todo menos el pie de página (importante: el encabezado probablemente también estará afuera). Establecer position: relative; ya sea para el .container superior o uno de sus ancestros (importante: el pie de página debe estar después de este elemento).

Paso 2: Altura del pie de página

Ahora, su parte inferior está en relación con su contenedor en lugar de su cuerpo, pero el valor inferior del afijo (que se usa para saber cuándo se debe pegar el afijo en la parte inferior) sigue siendo relativo al final del cuerpo, por lo que debe pasarle una función. que calculan la altura de los elementos después del contenedor, si es solo el pie de página, esto es suficiente: $(''footer'').outerHeight(true) .

Paso 3: Solución de problemas

Ahora lo tiene todo correcto, pero tres cosas aún pueden causar una posición incorrecta de la palanca y un parpadeo loco:

1. Otros elementos visuales además del pie de página que no tuvo en cuenta, como segundos pies de página o que no siempre se muestran, como la útil gema de notas de rieles ;

2. Las extensiones del navegador que agregan elementos al DOM, si están ocultas o no en el flujo, no debe contar su altura, la forma más fácil de hacerlo es contar solo los elementos que su aplicación conoce, pero la extensión podría terminar. hasta romper su aplicación. Puede probar si una extensión le está causando problemas al usar un navegador o una configuración que no tiene instaladas, o simplemente al "modo porno" (Incógnito en Chromium ( Ctrl + Shift + n ), Navegación privada en Firefox ( Ctrl + Shift + p )) si no ha habilitado las extensiones en él.

3. Las bibliotecas de Javascript también agregan elementos al DOM, no debe contar su altura también.

Para resolver estos problemas, intente que funcione con toda la palabra (CoffeeScript con Underscore.js):

_($(''footer'').nextAll('':visible'').addBack())
  .filter((el) -> el.offsetParent?)
  .reduce(((memo, el) -> memo + $(el).outerHeight(true)), 0)

Lo mismo, con Javascript y jQuery.fn.each:

var sum = 0
$(''footer'').nextAll('':visible'').each(function() {
  this.offsetParent != null && sum += $(this).outerHeight(true)
}
return sum

O solo podría explicar los elementos que conoce (prefiero esto, el otro que codifiqué para el desafío):

$(''footer'').outerHeight(true) + ($(''#footnotes_debug'').outerHeight(true) || 0)

Answer 7

Respuesta corta: tenga en cuenta que el contenido dentro de su afijo no utiliza box-sizing: border-box; Si está utilizando bordes.

Explicación: la función jQuery offset() utilizada en affix.js para calcular la posición actual del elemento en relación con el documento no tiene en cuenta la frontera.

Nota: jQuery no admite la obtención de las coordenadas de desplazamiento de elementos ocultos o la contabilidad de bordes, márgenes o conjunto de relleno en el elemento del cuerpo.

Por lo tanto, si el contenido dentro de su afijo tiene un borde y el box-sizing la box-sizing se establece en border-box , la altura incluirá el borde pero el desplazamiento no, lo que provocará que el afijo de cálculo se desactive ligeramente.

Answer 8

Si no le importa usar los atributos ''datos-'' en el marcado en lugar de SASS, esto debería funcionar:

http://www.bootply.com/l95thIfavC

También verás que quité el afijo JS.

HTML

<div class="well well-small affix-top" data-spy="affix" data-offset-top="150" id="account-overview-container">

CSS

body{
    position:relative;
}
header,
footer{
    background: #ccc;
    padding:40px 0;
    text-align:center;
}
header{
    margin-bottom: 10px;
}

.affix-top {
    top: 155px;
    position:absolute;
}
.affix {
    bottom:140px;
}

Actualización para Bootstrap 3

Para usar affix-bottom básicamente debe establecer la altura del pie de página o el espacio debajo del elemento adherido. Aquí hay un ejemplo: http://www.bootply.com/l95thIfavC

Answer 9

Simplemente reemplace el segmento de código para afijo en bootstrap como se indica a continuación.

Esto va ...

this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() }) 

y esto lo reemplaza

this.$element.offset({ top: scrollHeight - offsetBottom - this.$element.height() })

Aclamaciones.

Answer 10

Su violín parece funcionar como se desea si aumenta un poco el tamaño de la ventana en el violín. Teniendo en cuenta que el sitio web sería inutilizable en las dimensiones donde se rompe el afijo, debe ignorarlo o cambiar el diseño para que funcione con el espacio más pequeño en lugar de intentar solucionar el problema. El afijo bootstrap en la documentación no se usa para resoluciones más pequeñas, y seguiría su ejemplo.

Answer 11

Una posible solución es ignorar por completo la situación de la affix-bottom letrero estableciendo la bottom: null así:

$("#my-selector").affix({
    offset: {
        top: $("#some-thing").outerHeight(true),
        bottom: null
    }
});