jquery - scrolling - scrollbar bootstrap
Cómo obtener valores dinámicos de compensación de datos para el método Bootstrap 3 affix (7)
El afijo de datos inteligente de ThomasReggi no funcionó para mí en algunos casos de esquina (al cambiar el tamaño del documento, o cuando la columna pegada era demasiado alta). Pero me dio una idea simple: agregue un elemento vacío antes del contenido fijo y utilícelo para obtener el desplazamiento. Funciona bien cuando se redimensiona.
Mientras estaba en eso, también establecí el ancho del elemento para que sea su ancho natural en el elemento primario original. Aquí está mi solución:
$(''[data-affix-after]'').each( function() {
var elem = $(this);
var parent_panel = elem.parent();
var prev = $( elem.data(''affix-after'') );
if( prev.length != 1 ) {
/* Create a new element immediately before. */
prev = elem.before( ''<div></div>'' ).prev();
}
var resizeFn = function() {
/* Set the width to it''s natural width in the parent. */
var sideBarNavWidth = parent_panel.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);
elem.affix({
offset: {
top: prev.offset().top + prev.outerHeight(true),
bottom: $(''body>footer'').outerHeight(true)
}
});
};
resizeFn();
$(window).resize(resizeFn);
});
El HTML que lo acompaña es:
<div id=''before-affix''></div><!-- leave this empty -->
<div data-affix-after=''#before-affix''>
Put content to affix here.
</div>
o
<div data-affix-after=''#create''><!-- any ID that doesn''t exist -->
Put content to affix here.
</div>
El CSS requerido es:
.affix { top: 0px },
.affix-bottom { position: absolute; }
Si desea desactivar el afijo (por ejemplo, cuando se apila la columna de la derecha), utilice el CSS:
.affix, .affix-bottom { position: static; }
dentro de la consulta de medios apropiada.
soldado americano
Me gustaría utilizar el método Affix que se describe en la documentación de Bootstraps ( http://getbootstrap.com/javascript/#affix ); sin embargo, la barra de navegación que quisiera corregir en la parte superior de la página una vez que se desplaza puede tener un desplazamiento diferente. valores dependiendo del contenido sobre él.
Aquí hay un ejemplo de la barra de navegación:
<div class="navbar navbar-default" data-spy="affix" data-offset-top="200">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
Como puede ver, el data-offset-top actualmente está configurado en 200. Esto funciona bien si el contenido de arriba es 200px alto, pero el contenido anterior es dinámico y por lo tanto la altura sobre esta barra de navegación no es siempre la misma. ¿Cómo puedo hacer que el valor de data-offset-top sea dinámico?
Supongo que tendré que usar la forma javascript de hacerlo, pero estoy seguro.
Estaba absolutamente frustrado con la forma en que esto funciona, cada vez haciendo algunos cálculos personalizados y construyendo el offset de las alturas de los elementos sobre el afijo deseado.
Aquí está el afijo en su mejor momento.
El afijo boostrap normal no tiene en cuenta la posición superior del desplazamiento natural de los artículos, usted tiene que pasarlo manualmente como un atributo. Esto se encarga de eso, y explica el cambio superior de desplazamiento en el cambio de tamaño de la ventana.
var $attribute = $(''[data-smart-affix]'');
$attribute.each(function(){
$(this).affix({
offset: {
top: $(this).offset().top,
}
})
})
$(window).on("resize", function(){
$attribute.each(function(){
$(this).data(''bs.affix'').options.offset.top = $(this).offset().top
})
})
También publiqué esto en la revisión del código .
No olvides agregar el atributo data-smart-affix a tu elemento afijo
Pruebe este código de muestra: https://jsfiddle.net/NabiKAZ/qyrauogw/
(En esta muestra, la altura de la sección roja puede ser de 100px o 200px o 300px en el ancho de la ventana de diffrence, por lo que debe difrence data-offset-top cuando se desplaza).
Estaba teniendo muchos problemas con esto antes, y por alguna razón no pude obtener ninguna de las soluciones que otras personas habían sugerido para trabajar. Soy relativamente nuevo en Bootstrap y JQuery, así que probablemente estaba haciendo algo poco convincente que no estaba captando. De todos modos, encontré una solución que funciona muy bien, aunque estrictamente hablando no usa la funcionalidad affix como lo pretende Bootstrap. Mantuve mi #thisElement.affix {top: desiredFixedPosition;} intacta, pero me deshice de los atributos data-spy y data-offset-top de la etiqueta HTML de # thisElement. Luego codifiqué esto en JQuery:
var newAffix = function() {
if($("otherElementsAboveThisElement").height() <= $(window).scrollTop()) {
$("#thisElement").addClass("affix");
} else {
$("#thisElement").removeClass("affix");
}
}
$(document).ready(function() {
$(window).resize(newAffix);
$(window).scroll(newAffix);
}
Por lo que he probado, esto funciona independientemente de cuánto cambie el tamaño de la página o desplazamiento, y si se vuelve creativo con la forma en que lo llama en la función $(document).ready() , incluso podría tener el menú permanecer en la posición correcta durante las animaciones en altura. Como se dijo, técnicamente no es una solución totalmente aprobada por Bootstrap, pero se integra lo suficientemente bien en un sitio de Bootstrap que debería funcionar para algunos :)
Le sugiero que agregue envoltorio alrededor de div adherido para evitar el "salto de desplazamiento" con la barra de navegación pegada. Thomas publicó una buena solución, pero no incluye el espacio colapsado después de affix y no está funcionando en la versión boostrap 2.x que debo usar. Así que decidí escribir una implementación completamente nueva de affix. No necesita boostrap, solo jquery. Es mi primer javascript, así que tenga misericordia :) pero tal vez ayude a alguien. Siempre es bueno tener una solución sin bootstrap
function myaffix() {
var affixoffset = $(''.navbar'').offset().top
$(''#nav-wrapper'').height($(".navbar").height());
$(window).scroll(function () {
if ($(window).scrollTop() <= affixoffset) {
$(''.navbar'').removeClass(''affix'');
} else {
$(''.navbar'').addClass(''affix'');
}
});
};
$(document).ready(function () {
myaffix();
$(window).on("resize", function () {
myaffix();
});
});
Puede encontrar un ejemplo aquí: http://jsfiddle.net/3ss7fk92/
Puede usar jQuery para obtener la altura del contenido dinámico por encima de la navbar . Por ejemplo:
$(''#nav'').affix({
offset: {
top: $(''header'').height()
}
});
Demostración de trabajo: http://bootply.com/69848
En algunos casos, offset.bottom también se debe calcular para determinar cuándo "quitar la fijación" del elemento. Aquí hay un ejemplo de affix-bottom
Skelly arriba está bien y no hay mejor manera de hacerlo. La única solución posible con bootstrap "nativo" es adjuntar las opciones de afijo con una llamada de JavaScript (como se mencionó anteriormente en https://.com/a/18702972/2546679 ).
En particular, no es posible utilizar el atributo de data-offset para lograr el mismo efecto (incluso si esto fuera mucho más conveniente, e incluso si la documentación para Affix en http://getbootstrap.com/2.3.2/javascript.html#affix aumenta la esperanza de que uno pueda hacerlo).
Entonces uno puede escribir
data-offset=''{"top":42}''
pero uno no puede escribir, por ejemplo:
data-offset=''{"top":$("#banner").height()}''
La razón es que los atributos de los datos se analizan a través de la API JQuery .data() que solo permite analizar los valores puros de JSON, consulte https://api.jquery.com/data/ .
Thnx ThomasReggi por una idea. Pero puede ser más correcto escribir:
$(this).data(''bs.affix'').options.offset.top = $(this).offset().top
para aquellos como yo que también necesitaban un valor inferior que escribiría analógicamente.
Por cierto, también creo que se envuelve en un decorador basado en setTimeout (algo así como reblandecimiento).