I wonder if it is possible to have a top bar which acts like a bar followed by an iframe with any page content. Basically, what many websites do is the following:
http://jsfiddle.net/dotwired/e9n5z/
<style>
body {
height: 100%;
}
#bar {
height: 30px;
background: #000;
}
iframe {
box-sizing: border-box;
width: 100%;
height: 100%;
}
</style>
<div id="bar"></div>
<iframe src="http://apple.com" frameborder="0"></iframe>
I really want the bar generated by HTML / CSS / JavaScript or whatever else, but I do not want to load the DOM initially with an iframe, but have the same unobtrusive behavior from the bar (that means not overlay popups or anything shall overlay the bar and also the bar itself doesn't hide any part of the page).
I am interested in such a solution mainly because it will change the url in contrast to the iframe solution if some link is clicked. Any approach which will enable this url change is welcome.
// edit: As an more precise example, visit e.g. http://demo2.woothemes.com/?name=hub (the "top" bar in this case is at the bottom but the position doesn't really matter). When I click a link in the theme demo the URL will not change, so if I send that link to a friend he will see the frontpage of the template though I may have intended to see him some other concrete subpage.
I want to have such a bar which optimally is generated by JavaScript and is executed on the same demo page and not outside an iframe.