jquery - Afijo bootstrap de Twitter con infinitescroll y window.resize

twitter-bootstrap infinite-scroll

Question

Al leer algunas preguntas relacionadas sobre esto, me doy cuenta de que no hay $.affix(''refresh'') disponible para el componente de afijo bootstrap de Twitter. Mi problema, aunque relacionado, puede ser incluso un paso adicional entre solo una actualización. Déjame intentar explicar.

Tengo una página con la barra de navegación de arranque estándar. debajo del cual colocaré un sub-navegación que "fija" una vez que el usuario se desplaza más allá de los píxeles x (en mi caso, la barra de navegación tiene una altura de 41px, por lo que a 41px se activa el afijo y cambiando la clase .affix {top:41px} a .affix {top:41px} todo está bien)

Así que para este primer afijo puedo usar los atributos de solo html.

Más abajo en la página (en esencia, se puede considerar una "segunda página") Tengo otra navegación que debería "pegar" y reemplazar la primera sub-navegación una vez que el usuario se desplaza a una determinada posición, dado que la ubicación de la segunda La página / afijo es variable debido al contenido que uso js para calcular la altura de la primera página y establecer el offset: {top:xxx} según lo que obtenga.

Esto también funciona muy bien / como se esperaba cuando el usuario se desplaza un poco hacia abajo, el primer afijo de sub-navegación se activa, si continúa desplazándose y alcanza la segunda sub-navegación más abajo de la página en la que se activa y reemplaza el primer sub de afijo. -nav (en realidad no lo reemplaza per se, sino que se superpone con un índice z más alto)

A partir de aquí tengo dos problemas para los que no he podido encontrar una solución:

1. cuando el usuario cambia el tamaño de la ventana, el contenido de la primera página se hace más largo, por supuesto, lo que cambia mis dimensiones originales de tope de desplazamiento para el afijo en la página. Primero pensé que una simple llamada a .affix(''refresh'') sería / podría ser la solución pero, por supuesto, este método ni siquiera está disponible en el componente. Luego, pensé que solo podía volver a calcular manualmente la altura otra vez y volver a crear $(''.my-second-affix'').affix({offset: {top:x-new-offset}}); - PERO por alguna razón esto no parece funcionar en absoluto y no puedo entender por qué :(

2. El siguiente problema que hay que abordar es que también estoy usando jquery infinitescroll para cargar más y más páginas ... cada página puede tener otras sub-navegación en varias etapas que me gustaría colocar y reemplazar cual sea la última vez que se encuentre. en la cima.

Tenga en cuenta que también me gustaría asegurarme de que si el usuario se desplaza hacia atrás en la otra dirección, las sub-naves previamente colocadas volverán a colocarse y retrocederán (lo cual sospecho que estarán bien siempre y cuando las compensaciones de los mismos sean correctas)

Con suerte, esta explicación es suficiente para resaltar mi problema y alguien ya ha tratado esto antes o podría ofrecer alguna orientación hacia una solución. He intentado que el desplazamiento sea una función que también devuelva el desplazamiento actual desde arriba (como se mencionó en otra pregunta, el desplazamiento del corrector del cambio de arranque ), pero por alguna razón tampoco funciona como se esperaba.

Cualquier ayuda es muy apreciada

Answer 1

¿Has probado $(''#myAffix'').affix(''checkPosition'') . Esto está disponible en Bootstrap3.0

Answer 2

Esta pregunta es bastante antigua pero como nadie más la ha respondido ...

Tuve un problema similar con el afijo. Así es como lo resolví.

$(''.affixed-elements'').each(function() {
var topOffset = 0; //calculate your top offset here
var $container = //Set this to the element''s container;
$(this).affix({
offset: {
top: function() {
return $container.offset().top - topOffset;
},
bottom: function() {
return $(''body'').height() - ($container.offset().top+$container.outerHeight());
}
}
});
});

Esos ajustes deben mantener el elemento pegado dentro de los bordes de su contenedor incluso después de que la ventana cambie de tamaño.

Answer 3

Le recomendaré usar offset en el código como este <div class="col-md-offset-6"> . Espero que sea útil

Answer 4

Si lo entendí correctamente, necesitarás calcular el desplazamiento al cambiar el tamaño. Este ejemplo está usando algo como Jquery:

$(window).resize(calcOffset);
function calcOffset()
{
var location = $("myElement").offset();
var top = location.top;
}