Как изменить URL, когда прокручивается страница?

Question

Есть страница с контентом, которая имеет адрес example.ru/article_s.html, когда страница прокручивается до конца, загружается другой файл с контентом из другой папки: data/article.html.

С помощью window.history.pushState я изменил URL страницы, но он меняется только один раз, а в папке /data страниц много.

Как сделать так, чтобы URL заменялся при прокрутке страницы, при загрузке другого содержимого и при перезагрузке страницы сохранялось исходное состояние страницы?

html код, который указывает путь к новым загружаемым файлам:

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

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

'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);
            window.history.pushState({
                page: 'article__article'
              },
              'article',
              '/data/article.html',
            );
            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();

});

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
    <nav id="navlist">
        <a href="#s1">Go to Section 1</a>
        <a href="#s2">Go to Section 2</a>
        <a href="#s3">Go to Section 3</a>
    </nav>
    <section id="s1">Section 1 Content</section>
    <section id="s2">Section 2 Content</section>
    <section id="s3">Section 3 Content</section>

    <style>
        nav a {
            display: block;
        }
        section {
            height: 600px;
            border-top: 1px solid black;
        }
    </style>
<script>
    navlist = [];
    $("#navlist a").each(function(i) {
        var thisLink = $(this);
        var thisId = thisLink.attr('href');
        var thisTarget = $(thisId);
        navlist.push({
            'anchor': thisLink,
            'id': thisId,
            'target': thisTarget
        });
        thisLink.on('click', function(e) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: thisTarget.offset().top
            }, 800);
        });
    });
    $(window).on('scroll', function(e) {
        $.each(navlist, function(e, elem) {
            var placement = elem.target[0].getBoundingClientRect();
            if( placement.top<window.innerHeight && placement.bottom>0 ) {
                history.pushState({}, '', elem.id);
                return false;
            };
        });
    });

</script>
</body>
</html>

БЛОГ НА HUSL

Как изменить URL, когда прокручивается страница?

Ответы (1 шт):