Javascript 显示页面更改动画时更改URL

想知道如何在我正在建设的网站上实现以下效果：

宽度为100vw、高度为100vh的Div（我们称之为#container2）隐藏在主页右侧（我们称之为主页#container1）

将鼠标移向页面的右边缘会导致#container2向外窥视

如果用户单击#container2的可见部分，它会一直向左滑动，完全遮挡#container1

用户现在位于具有相应URL的新页面上，可以向下滚动并查看更多内容

我已经大致了解了前3个步骤。我需要帮助的是找出最佳方法：

• 在滑动动画期间，处理从site.com到site.com/newpage的URL转换
• 一旦页面转换发生，如何将新页面的内容动态加载到#container2中，这样用户可以向下滚动并在点击时看到新页面的内容，但如果用户选择留在主页上，则不必加载内容
• 如果有人键入或直接链接到site.com/newpage，他们将看到与在主页上开始、单击#container2并观看转换动画的人看到的相同的内容（但不显示页面转换）

---

我没有任何代码片段可以显示，因为我不确定从哪里开始。任何帮助或指导都将不胜感激。如果可能的话，我想使用一个普通的javascript解决方案，因为我已经设法使站点上的所有其他功能在没有JQuery的情况下运行。如果JQuery是实现这一点的唯一方法，我仍然希望听到解决方案。

有很多方法可以做到这一点。我的直觉是只有一个页面有不同的url片段。你的问题相当广泛，所以我的回答也很广泛

一种方法是在css中使用目标伪类。您所需要做的就是使container2成为一个链接，将片段添加到与所述容器的类名匹配的url的末尾。您可以为：hover设置一些样式，使容器滑出；为：target设置一些设置，使容器位于页面中心。Container2可以在折叠下面有第二个部分，包含页面的其余内容

您可以通过添加和删除不同元素中的类来使用javascript做一些非常类似的事情，但是使用目标伪类将有助于完成最后一点。如果用户直接访问带有片段的链接，他们将看到显示该容器的页面

---

我希望这能给你一个起点。下面是关于目标伪类的内容。

看一下history.pushState、一些jquery内容和htaccess重写。然而，要正确回答这一问题还远远不够宽泛…@Jonasw我有什么细节需要补充更具体的吗？没有。你自己试试吧！然后问你是否有问题。