更改网页位置，同时保留一些项目静态？

Question

不确定描述我的意思的最佳方式，最好的方法是在解释时查看Facebook。

Facebook底部的栏将始终保持不变，所有聊天窗口都打开，更改页面时不会轻弹，但是，网页和地址栏都将更改为您请求的新页面，对我来说，似乎网页实际上根本没有变化，相反，地址栏的URL和页面内容都会发生变化。

我正在为乐队网站制作一个音乐播放器，我希望在网站的所有页面上保持静态，无需重新加载并重新开始每个新页面。

Answer 1

底栏位于position: fixed位置，使其相对于视口而非文档。

其他页面加载了XHR或 AJAX 。

更改网址可能是片段标识符，除非您有一个最先进的浏览器，它似乎正在使用HTML5 history API（GitHub目前也是如此）。

  

我们基础架构团队的工程师Zach Rait实施了History API，以便通过AJAX选择性加载页面内容，同时保留可读的URL。以前，当前的应用程序状态存储在URL片段中，导致不合适的URL，例如“profile.php？id = 1586010043＃！/ pages / Haskell / 401573824771”。现在，因为HTML5允许我们将当前显示的URL与应用程序的实际状态分离，所以我们能够更快地显示页面，节省带宽，并避免污染用户的位置栏。

Source

Answer 2

听起来你想要一个模板并使用JQuery或类似语言在网站的一部分上动态加载新内容？ 通过这种方式，JQuery将使用ajax在主窗口的一部分中加载新内容，而不会遇到很多主页重新加载。

您可以使用css设置底部栏的样式

#somelink{
position:absolute;
bottom:0px;
}

HTML

<a href="" id="somelink">click me</a>
<div id="news">Replace me with new content</div>

JQuery的

$("#somelink").click(function(){
  $("#news").get("album.html",function(data){$(this).html(data);}); 
});