向下滚动 WordPress 博客的单个页面时如何更改页面 URL？答案

【问题标题】：How to change page url while you scroll down a single page for a WordPress blog?向下滚动 WordPress 博客的单个页面时如何更改页面 URL？
【发布时间】：2015-06-18 16:29:31
【问题描述】：

我正在尝试实现类似于 Webby Awards 在他们的网页上所做的事情。

我确实提到了其中一个问题Is it possible to have the url change while you scroll down a single page，但无法理解将其集成到 WordPress 中的方法。

我想将它集成到 WordPress 博客中。谁能帮我解决这个问题？

【问题讨论】：

您能否更深入地解释您的尝试，以使问题不那么依赖于外部网站。
stackoverflow.com/questions/6146560/… 这可能对你有帮助。
@Ajay 你读过 OP 问题吗？ OP 提供您粘贴的相同链接。
@Kabahango 我尝试寻找插件但找不到任何插件。我只是 WordPress 的初学者，所以无法真正理解如何存档。如果您能告诉我如何将其集成到 WordPress 中，将不胜感激！
那么您是在问如何将 JavaScript 添加到 WordPress 博客？

标签： php jquery wordpress

【解决方案1】：

HTML

<div id="div1" style="height:500px">div1</div>
<div id="div2" style="height:500px">div2</div>
<div id="div3" style="height:500px">div3</div>
<div id="div4" style="height:500px">div4</div>

unction 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("#div1")) { window.history.pushState("state", "title", "/div1"); return; }
    if (isScrolledIntoView("#div2")) { window.history.pushState("state", "title", "/div2"); return; }
    if (isScrolledIntoView("#div3")) { window.history.pushState("state", "title", "/div3"); return; }
    if (isScrolledIntoView("#div4")) { window.history.pushState("state", "title", "/div4"); return; }
});

或

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height  > some_number) {
        // change url here
    }
});

【讨论】：

有没有更好的方法。可以通过启用 Ajax 来实现吗？