Bootstrap affix reset no funciona

Estoy tratando de implementar un afijo en bootstrap. No debería ser un problema, pero quiero que sea receptivo.

Cuando una página ha cambiado de tamaño, algunos elementos se ocultarán en la parte superior de la página, y debido al cambio de ancho, necesito restablecer el afijo y establecerlo en la nueva position.

Simplemente lo busqué y encontré una solución aceptada , pero parece que no funciona.

Esto es lo que he intentado:

$(window).off('#myAffix'); $('#myAffix').removeData('bs.affix').removeClass('affix affix-top affix-bottom'); $('#myAffix').affix({ offset: { top: function () { console.log('Offset top from: ' + $('.navbar').offset().top); return (this.top = $('.navbar').offset().top); } } }); 

Lo estoy llamando en document.ready , y en window.resize events.

Creé una demostración para eso. Estos son los pasos, cómo puedes reproducir el problema:

  • Cuando lo abra, cambie el tamaño de la window de repetición mientras haya 2 columnas antes del afijo limitado y vuelva a cargar la página. Cuando te desplaces hacia abajo, verás, el afijo comienza a funcionar cuando lo necesita.

  • Cambia el tamaño de la window mientras solo queda la columna de la izquierda. Affix funciona ahora también.

  • Cambie el tamaño de la window nuevamente, mientras aparece la columna de la derecha. Ahora el afijo se activará, cuando scope la position anterior, la altura de la columna izquierda. Eso es malo.

Parece que mi código se está ejecutando, pero no tiene efecto en el afijo.

PD: No me importa la position del afijo, solo quiero arreglarlo, cuándo / dónde será reparado.

JsFiddle aquí .

2 Solutions collect form web for “Bootstrap affix reset no funciona”

Solo debe hacer un cambio para que su código funcione como desee, y esto es para cambiar $(window).off('#myAffix'); a $(window).off('.affix');

Esta es la nueva function:

 $.myFunction = function() { $(window).off('.affix') $('#myAffix').removeData('bs.affix').removeClass('affix affix-top affix-bottom'); $('#myAffix').affix({ offset: { top: function() { console.log('Offset top from: ' + $('.navbar').offset().top); return (this.top = $('.navbar').offset().top); } } }); }; 

En su muestra, tiene en el HTML la class .affix-top y el atributo data-spy="affix" .

 <nav class="navbar scroll-menu affix-top" data-spy="affix" id="myAffix" style="border: 1px solid #f00;"> <ul class="nav navbar-nav" style="font-size: 10px; background: #fff;"> <li><a href="#section1">SECTION ONE</a></li> <li><a href="#section2">SECTION TWO</a></li> </ul> </nav> 

No son necesarios, ya que .affix-top se agrega dinámicamente mediante el complemento cuando se inicializa y el atributo data-spy="affix" tampoco es necesario, ya que se está inicializando con JavaScript.

Entonces, tu HTML sería:

 <nav id="myAffix" class="navbar scroll-menu" style="border: 1px solid #f00;"> <ul class="nav navbar-nav" style="font-size: 10px; background: #fff;"> <li><a href="#section1">SECTION ONE</a></li> <li><a href="#section2">SECTION TWO</a></li> </ul> </nav> 

Además, en la documentation especifica lo siguiente:

Utilice el complemento affix a través de attributes de datos o manualmente con su propio JavaScript. En ambas situaciones, debe proporcionar CSS para el posicionamiento y el ancho de su contenido adjunto.

Eso significa que debe agregar algo de CSS para establecer el ancho y la position del div adherido.

 .affix { top: 40px; /* This is the desinetworking offset where the affixed div will appear */ width: 100%; /* This is the desinetworking width where the affixed div will have */ } 

Con los cambios anteriores, el afijo funciona como se espera, tanto en pantalla completa como en pantalla pequeña.


Pero luego, me encontré con un error !! El error apareció cuando se cargaba en pantalla completa y luego, cambiando el tamaño a una pantalla pequeña.

Cuando está en una pantalla pequeña, el complemento restring las properties de offset de la initialization de pantalla completa. El error es que el complemento affix vincula a un controller en el evento window.scroll que nunca se elimina.

Ese es un error de fuga de memory (que se encuentra aquí ), y una solución para eso se menciona en una respuesta.

Entonces, en lugar de llamar:

 $(window).off('#myAffix'); 

debe llamar a lo siguiente para eliminar correctamente todos los events creados por la initialization anterior

 $(window).off('.affix'); 

Para resumir, su JS sería como:

 $.initAffix = function() { $('#myAffix').affix({ offset: { top: function() { console.log('Offset top from: ' + $('.navbar').offset().top); return (this.top = $('.navbar').offset().top); } } }); }; $.resetAffix = function() { console.log('resetAffix'); $(window).off('.affix'); $('#myAffix').removeData('bs.affix').removeClass('affix affix-top affix-bottom'); $.initAffix(); }; $(window).on('resize', $.resetAffix); $.initAffix(); 

Aquí hay una demostración funcional.

  • "JavaScript colocado al final del documento para que las páginas se carguen más rápido" ¿VERDADERO?
  • Carrusel de Bootstrap: quitar el deslizamiento automático
  • Ejemplo de menu de ajuste vertical de Bootstrap 3 como en el problema de cambio de tamaño de documentos
  • Obtener Parsley 2.x trabajando correctamente con Bootstrap 3
  • ui angular modal después del evento cerrado
  • ¿Cómo puedo mostrar el modal en Twitter bootstrap solo una vez?
  • Bootstrap Carousel-inner "autoplay"
  • Bootstrap Timepicker - Intervalos de minutos
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.