Как изменить URL-адрес при достижении определенного div и отобразить содержимое этого измененного URL-адреса в div с помощью PushState - PullRequest
Новая
       12

Как изменить URL-адрес при достижении определенного div и отобразить содержимое этого измененного URL-адреса в div с помощью PushState

0 голосов
/ 27 января 2019

Я пытаюсь написать код, в котором он прокручивается вниз до определенного элемента div, затем URL-адрес должен быть изменен, а содержимое этого URL-адреса должно отображаться внутри этого конкретного тега div и так далее.то же самое, что получение RSS-канала и отображение его на домашней странице, но вы хотите сделать это с помощью pushstate. 

    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
    
    <script type="text/javascript">
        jQuery(function ($) {
        $('#page0').load('https://example.com/hr-pillar-post');
        $('#page1').load('https://example.com/hr-pillar-post/how-do-i-become-a-hr-professional');
    	$('#page2').load('https://example.com/hr-pillar-post/what-can-i-do-with-a-degree-in-hr');
        });
    </script>
    <script>
    function isScrolledIntoView(elem)
    {
        var $elem = $(elem);
        var $window = $(window);
    
        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();
    
        var elemTop = $elem.offset().top;
        var elemBottom = elemTop + $elem.height();
    
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
    
    $(window).scroll(function() {
        if (isScrolledIntoView("#page0")) { window.history.pushState("state", "title", "/hr-pillar-post"); document.title = "HR Pillar Page"; return; }
        if (isScrolledIntoView("#page1")) { window.history.pushState("state", "title", "/hr-pillar-post/how-do-i-become-a-hr-professional"); document.title = "How do i become a HR professional"; return;}    
        if (isScrolledIntoView("#page2")) { window.history.pushState("state", "title", "/hr-pillar-post/what-can-i-do-with-a-degree-in-hr"); document.title = "What can i do with a degree in HR?"; return; }
    });
    </script>
    <div id="page0"></div>
    <hr>
    <div id="page1"></div>
    <hr>
    <div id="page2"></div>
...