How do I replace the URL when scrolling?

Question

There is a page with articles. As soon as the page finishes, another article is loaded from another file.

Each uploaded file has an attribute data-url="/url...". How can I display this url when I upload a new article in scroll?

For example: there is a page with url example.com/data/article.html and when the page is scrolled down the new file is loaded and the url changes to example.com/data/articleNext.html without rebooting.

There is an _url variable in the code and you can do this with it, but how do I spell it correctly?

An example script to load a new scroll page:

'use strict';

var width = $(window).width();
var height = $(window).height();
var $article_list = $('#article_list');
var sticky = 0;
var send = true;
var page = {
  init: function init() {
    var top = page.getScrollTop();

  },

  getScrollTop: function() {
    if (typeof pageYOffset != 'undefined') {
      //most browsers except IE before #9
      return pageYOffset;
    } else {
      var B = document.body; //IE 'quirks'
      var D = document.documentElement; //IE with doctype
      D = D.clientHeight ? D : B;
      return D.scrollTop;
    }
  },
  scrollPage: function() {
    var topPos = $('#get_article').offset().top;
    var top = page.getScrollTop();
    var diff = topPos - top;
    // console.log( diff +'||'+ top +'||'+ topPos);

    if ((diff <= (height - sticky)) && send) {

      var $last_article = $article_list.children().last()
      var _url = $last_article.attr('data-url');
      send = false;
      if (_url) {
        $.ajax({
          url: _url,
          type: 'GET',
          dataType: 'html',
          beforeSend: function() {
            // включение прелоудера
            send = false;
          },
          complete: function() {
            // отключение прелоудера
          },
          success: function(obj) {
            send = true;
            $article_list.append(obj);

            const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
            const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));
          },
          error: function(xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText + "\r\n" + xhr);
          }
        });
      }
    }
  }
};
/**
 * section init
 */
$(document).ready(function() {
  page.init();
});
/**
 * section scroll animation
 */
$(document).on("scroll", function() {
  page.scrollPage();

});

$(window).resize(function() {});

File article.html:

<div class="article__article" data-url="/data/article.html">Content...</div>

Content that's loaded on scroll:

<div class="article__article" data-url="/data/art2.html">Next Content...</div>

Tried to do it with window.history.pushState, but somehow it doesn't work, I guess I'm doing something wrong.

if (_url) {
  $.ajax({
    url: _url,
    type: 'GET',
    dataType: 'html',
    beforeSend: function() {
      // включение прелоудера
      send = false;
    },
    complete: function() {
      // отключение прелоудера
    },
    success: function(obj) {
      send = true;
      $article_list.append(obj);
      
      ///////
      const newUrl = "article_s.html"
      window.history.pushState({}, "", newUrl);
      ///////
      
      const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
      const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));
    },
    error: function(xhr, ajaxOptions, thrownError) {
      console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText + "\r\n" + xhr);
    }
  });
}