Question

我正在使用Ajax Load More插件在Wordpress上构建无限滚动页面。我可以让它永远滚动，但是，我有一个问题：我使用航点来显示和隐藏带有帖子和共享按钮标题的粘性导航栏。

始终是相同的航点：#Capa和#SigaANDBotoes。

在第一篇文章中，它运行正常。但是，当通过Ajax调用下一个时，它不会。对于我正在阅读的内容，它应该刷新或被销毁/重新创建，因此当下一个#Capa和#SigaANDBotoes出现时它可以重新执行。

我尝试了很多我在互联网上阅读的内容，但我找不到解决方法。有什么帮助吗？

这是我正在使用的Waypoints.js代码：

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

Answer 1

好的，解决方案非常简单。没有必要刷新，摧毁或任何东西。您所需要的只是使用CLASSES，而不是ID，因为ID是唯一的，并且航路点被锁定到它们。

所以这里是最终的代码：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%' });
});

航点和无限滚动

1 个答案: