航点和无限滚动答案

【问题标题】：Waypoints and infinite scrolling航点和无限滚动
【发布时间】：2016-06-01 20:49:14
【问题描述】：

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

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

在第一篇文章中，它运行正常。但是，当通过 Ajax 调用 next 时，它不会。对于我正在阅读的内容，它应该刷新或被销毁/重新创建，因此当下一个 #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%' });
});

【问题讨论】：

标签： javascript jquery ajax infinite-scroll jquery-waypoints

【解决方案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%' });
});

【讨论】：