Jquery Waypoints Refresh

Question

Estoy trabajando en una página que utiliza puntos de referencia para crear un div pegajoso que se desplaza por la página con la posición: fijo hasta que alcanza la parte inferior de su div principal. El uso de código im funciona según lo previsto hasta que se llame a $ .waypoints ('refresh'), luego el div pegajoso salta de nuevo a la parte superior de la página y pierde su posición fija.

Aquí está el código:

$('#content').waypoint(function(event, direction){ 
if (direction === 'down') { 
    $(this).removeClass('sticky').addClass('bottomed'); 
} 
else { 
    $(this).removeClass('bottomed').addClass('sticky'); 
} 
}, { 
    offset: function() { 
    return $('#leftCol').outerHeight() - $('#content').outerHeight(); 
} 

}).find('#leftCol').waypoint(function(event, direction) { 
    $(this).parent().toggleClass('sticky', direction === "down"); 
    event.stopPropagation(); 
     });   

Dónde #leftCol es el div que se desplaza por la página y #content es su padre div.

El css que tengo es:

#content { 
width: 975px; 
height: auto; 
position: relative; 
margin-top: 10px; 
margin-bottom: 20px; 
min-height: 800px; 
} 

#leftCol { 
position: absolute; 
width: 974px; 
} 

.sticky #leftCol { 
position:fixed !important; 
top:0 !important; 
left: 50% !important; 
width: 974px !important; 
margin-left: -488px; 
} 

.bottomed #leftCol { 
position: absolute !important; 
bottom: 0px; 
} 

Cualquier ideas sobre cómo mantener la posición de #leftCol cuando .waypoints $ ('refresh') se llama sería muy apreciado.

Gracias

Answer 1

No, no, no siempre utilizan el elemento fixed posición como el punto de referencia. Vea todos los siguientes asuntos cerrados en GitHub: #64, #44, #32, #26, #24, #13, #10, #4.

Esto es fácilmente el más incomprendido sobre Waypoints, y es absolutamente mi culpa no comunicar cómo funcionan los Waypoints. Planeo hacer esto mucho más claro en la próxima iteración del complemento.

Para cualquiera que se pregunte: Waypoints funciona mirando el desplazamiento de página de un elemento. Pero el desplazamiento de página de un elemento de posición fijo cambia constantemente a medida que el usuario se desplaza. Por lo tanto, cada vez que se realiza una actualización, ya sea manualmente, agregando otro waypoint o cambiando el tamaño del navegador, la ubicación de ese waypoint cambia para coincidir con el lugar donde se encuentra el usuario en el desplazamiento de la página en ese momento. Lo que quiere es un elemento de posición estática normal que no deje el flujo de documentos para ser el punto de referencia. En el ejemplo que presento en el sitio del proyecto de Waypoints, el waypoint es un elemento contenedor que permanece en su lugar, mientras que el nav envuelve ganancias y pierde el posicionamiento fijo a través de CSS. Es muy fácil para alguien que no entiende las compensaciones de página y CSS hacer lo que OP ha hecho aquí, ya que parece intuitivo. De nuevo, esto es algo que se abordará más directamente en la documentación/ejemplos en el futuro.