Change page url as custom scrolls with django-infinite pagination and jquery-waypoints?

I am trying to use history.pushState()

to change the browser url when the user is viewing a movie list. I am using django-infinite pagination with Twitter style pagination.

What I would like to do, since the user is constantly scrolling up or down the current list of movies, the url will change. Let's say the user scrolls to 9, the url is updated to /?page=9

. But if the user scrolls down to page 2, the url should update to /?page=2

.

Result: If the user clicks on the link and then hits the back button, they are returned to the last page they were on.

This will continue with django-endless-pagination, but I want it to work the other way around if the user scrolls through the backup page. I think jquery-waypoints is the answer to my problem.

I have this generated when pages are loaded via Ajax:

<li style="display: none">
  <div id="waypoint1" class="waypoint" data-request-path="/movie/?page=1"></div>
</li>

      

        
        
        
      

    

Each of them gets a unique identifier and has a waypoint class. The data request path is the current path of the page.

I tried using:

$(".waypoint").waypoint(function() {
    history.pushState({scrollTop:document.body.scrollTop},document.title,$(this.element).attr("data-request-path"));
});

      

        
        
        
      

    

Which works the first time we send a waypoint, but doesn't work when we send additional waypoints. These extra waypoints don't exist in the document until the extra data is pulled through Ajax when the user scrolls.

What do I need to do to get the waypoints to cause the url to change as they scroll and appear on the page?