Question

我正在努力达到与此website相同的效果。

当您滚动时，您会注意到URL更改并且内容发生了更改，但是当我检查在控制台中发出的请求时，我看不到要获取新html内容的新AJAX请求。我无法弄清楚这些内容是如何加载的。

＆＃34;页面更改＆＃34;只是一个javascript滚动效果，javascript也会更改URL。如果您注意到，请转到“关于”部分并刷新该网址，但找不到该页面。

非常感谢任何关于如何实现这一目标的指导。我已经阅读了页面上的javascript源代码，但随着它的缩小，我仍然在努力理解它是如何工作的。也许我应该使用html5的历史状态。

我当前的项目设置如下：

index.html文件如下所示：

<body>       
    <header>
        <img src="homeLogo.png">
    </header>
    <div id="scene">
        <h3>Home page</h3>
        <div class="bgImage"></div>
    </div>
    <footer>
        Footer 
    </footer>
</body>

tress / index.html文件如下所示：

    <body>       
        <header>
            <img src="homeLogo.png">
        </header>
            <div id="scene">
               <h3>Trees</h3>
                 <div class="bgImage trees"></div>
           </div>
        </div>
        <footer>
            Footer 
        </footer>
    </body>

urban / index.html与tress / index.html相同，除了id为scene的div中的div。

根据项目的设置方式，我想知道如何使用不同的html文件更新内容页面。

Answer 1

查看History API，特别是函数：

   window.history.pushState({ your_data:"whatever"}, "title", newUrl);

https://developer.mozilla.org/en-US/docs/Web/API/History_API

有优秀的第三方库可以帮助您轻松构建跨浏览器解决方案，尽管现代浏览器可以很好地遵循标准。

问题的其余部分只是动态添加内容，这些内容可能来自ajax请求。

在滚动上更改html的内容

1 个答案: