Как добавить изменение URL при прокрутки страницы?

Question

[Дмитрий]

Есть страница со статьями. Как только страница заканчивается, из другого файла загружается другая статья.

Каждый загруженный файл имеет атрибут data-url="/url...". Как я могу отобразить этот url, когда я загружаю новую статью в прокрутке?

Скрипт прокрутки:

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

Пример страницы:

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

<!-- Next page -->
<div class="article__article" data-url="/data/articleNext.html">Content...</div>

Answer 1

[Алексей Ярков]

1. Отслеживаем появление дива в области видимости
   
2. Читаем атрибут data-url
   
3. Запрашиваем контент по этому урлу
   
4. Вставляем контент в див
   

Comments

[Дмитрий]

Можете пожалуйста показать, как это прописать в коде, который выше