Changing a webpage location, while keeping some items static?

Not sure the best way to describe what I mean, the best way is to look at Facebook whilst I explain.

The bar at the bottom of Facebook will always stay the same, with all chat windo开发者_StackOverflowws open, and no flicking when you change a page, however, the webpage and the address bar will all change to the new page that you requested, to me that seems like the webpage doesn't actually change at all, and instead, the address bars' URL changes as well as the page content.

I am working on a music player for a bands website, that I want to keep static across all the pages on the site, without reloading and starting again every new page.

---

The bottom bar is positioned with position: fixed which makes it relative to the viewport, not the document.

The other pages are loaded with XHR, or AJAX.

The changing URL is probably the fragment identifier, unless you have a cutting edge browser, which appears to be using the HTML5 history API (GitHub currently is too).

Zach Rait, an engineer on our infrastructure team, implemented the History API to enable selective loading of page content via AJAX while preserving readable URLs. Previously, current application state was stored in the URL fragment which resulted in unseemly URLs like “profile.php?id=1586010043#!/pages/Haskell/401573824771”. Now, because HTML5 allows us to decouple the currently displayed URL from the actual state of the application, we’re able to display pages more quickly, save bandwidth, and avoid polluting users’ location bars.

Source.

---

sounds like you want a template and using JQuery or a similar language to dynamically load new content on a portion of the site? In this way, JQuery will use ajax to load new content in part of the main window without you ever experiencing much of the main page reloading.

You can use css to style a bar at the bottom

#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);}); 
});