Jquery Waypoints Refresh

Question

Je travaille sur une page qui utilise des waypoints pour créer un div collant qui fait défiler la page avec la position: fixe jusqu'à ce qu'il atteigne le bas de son div parent. Le code im using fonctionne comme prévu jusqu'à ce que $ .waypoints ('refresh') soit appelé alors le div collant revient en haut de la page et perd sa position fixe.

Heres le code:

$('#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(); 
     });   

Où #leftCol est la div qui fait défiler la page et #content est sa mère div.

Le css J'est:

#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; 
} 

Toutes les idées sur la façon de maintenir la position de #leftCol quand $ .waypoints (« rafraîchissement ») est appelé serait très apprécié.

Merci

Answer 1

Ne pas, ne sont pas, ne jamais utiliser l'élément de position fixed comme le point de passage. Voir tous les numéros fermés suivants sur GitHub: #64, #44, #32, #26, #24, #13, #10, #4.

C'est sans aucun doute la chose la plus mal comprise au sujet des Waypoints, et c'est de ma faute si je ne communique pas assez comment fonctionne Waypoints. Je prévois de rendre cela beaucoup plus clair dans la prochaine itération du plugin.

Pour qui que ce soit: Waypoints fonctionne en regardant le décalage de page d'un élément. Mais le décalage de page d'un élément de position fixe change constamment au fur et à mesure que l'utilisateur défile. Ainsi, lorsque l'actualisation est appelée, que ce soit manuellement, en ajoutant un autre waypoint, ou en redimensionnant le navigateur, l'emplacement de ce waypoint change pour correspondre à l'endroit où l'utilisateur se trouve dans le défilement de la page à ce moment. Ce que vous voulez, c'est un élément de position statique normal qui ne laisse pas le flux de documents être le waypoint. Dans l'exemple que je donne sur le site du projet Waypoints, le waypoint est un élément wrapper qui reste en place, tandis que le nav wraps gagne et perd le positionnement fixe via CSS. Il est très facile pour quelqu'un qui ne comprend pas les décalages de page et CSS de faire ce que le PO a fait ici, car il semble intuitif. Encore une fois, c'est quelque chose qui sera abordé plus directement dans la documentation/exemples à l'avenir.