javascript - Waypoints and infinite scrolling -
i'm building infinite scroll page on wordpress using ajax load more plugin. can make scroll forever, but, have 1 problem: use waypoints show , hide sticky navbar title of post , share buttons.
it's same waypoints: #capa
, #sigaandbotoes
.
on first post, runs ok. but, when next called via ajax, not. reading, should refresh or destroyed / recreated, on again when next #capa , #sigaandbotoes
appear.
i tried lot of things read around internet, couldn't find solution this. help?
this waypoints.js code i'm using:
$(document).ready(function(){ $('#capa').waypoint(function(direction) { $('#barra').css('display', 'block'); if (direction === 'down') { $('#barra').addclass('fadeindownbig').removeclass('fadeoutupbig'); } else if (direction === 'up') { $('#barra').addclass('fadeoutupbig').removeclass('fadeindownbig'); } }, { offset: '-100%' }); $('#sigaandbotoes').waypoint(function(direction) { $('#barra').css('display', 'block'); if (direction === 'down') { $('#barra').addclass('fadeoutupbig').removeclass('fadeindownbig'); } else if (direction === 'up') { $('#barra').addclass('fadeindownbig').removeclass('fadeoutupbig'); } }, { offset: '100%' }); });
ok, solution simple. there's no need refresh, destroy or whatever. need use classes, not ids, since ids unique , waypoints locked them.
so here's final code :p
$(document).ready(function(){ $('.capa').waypoint(function(direction) { $('.barra').css('display', 'block'); if (direction === 'down') { $('.barra').addclass('fadeindownbig').removeclass('fadeoutupbig'); } else if (direction === 'up') { $('.barra').addclass('fadeoutupbig').removeclass('fadeindownbig'); } }, { offset: '-100%' }); $('.sigaandbotoes').waypoint(function(direction) { $('.barra').css('display', 'block'); if (direction === 'down') { $('.barra').addclass('fadeoutupbig').removeclass('fadeindownbig'); } else if (direction === 'up') { $('.barra').addclass('fadeindownbig').removeclass('fadeoutupbig'); } }, { offset: '100%' }); });