Showing specific div depending on the page I am on infinite scroll

I am using Ajax Load More on my WordPress website to create a infinite scroll of single posts (using Previous Post) add-on. It works fine. BUT, I have a sticky navbar that hides and shows depending of where I am in the page that use get_the_permalink() and get_the_title() to, well, get the url and permalink.

If I just scroll down, everything works fine. The navbar keeps showing and hiding with the title of the page I’m reading, the buttons keep using the url. But, if I scroll up, it just gets the last loaded info and that’s it. Even if I’m on post #1, it shows title and permalink from post #8.

I noticed that all the sticky bars ARE THERE, but it just show/hide the last one. I then assigned unique classes for them (using the post ID)… But nothing changed. Scrolling down it goes smoothly, scrolling up, it uses the last loaded info.

For me it’s clear that the problem is the showing / hiding thing, since I have some share buttons using permalink and title and it works fine. Also, since all the sticky bars ARE THERE, but not showing / hiding… 😛

Here’s what I use to show the sticky bar:

<script>
 var IDdoPost = <?php global $post; echo $post->ID; ?>
$(document).ready(function(){
  $('.Waypoint01').waypoint(function(direction) {
    $('.Barra-'+IDdoPost).css('display', 'block');
    if (direction === 'down') {
      $('.Barra-'+IDdoPost).addClass('fadeOutUpBig').removeClass('fadeInDownBig');
    } else if (direction === 'up') {
      $('.Barra-'+IDdoPost).addClass('fadeInDownBig').removeClass('fadeOutUpBig');
    }
  }, { offset: '100%' });  


  $('.Waypoint02').waypoint(function(direction) {
    if (direction === 'down') {
      $('.Barra-'+IDdoPost).addClass('fadeOutUpBig').removeClass('fadeInDownBig');
    } else if (direction === 'up') {
      $('.Barra-'+IDdoPost).addClass('fadeInDownBig').removeClass('fadeOutUpBig');
    }
  }, { offset: '88' });
});
</script>

Any help?