From the static screenshots, it's evident that an <audio> element is fixed at the top of the page upon scrolling. However, the preference is to have the element visible even before any scrolling occurs.
The current solution involves using cumbersome JavaScript to remove and append the element as a child during scrolling. Are there any alternative suggestions?
http://jsfiddle.net/bobbyrne01/772yerga/1/
html ..
<div class="header">
<audio controls>
Your browser does not support the audio element.
</audio>
</div>
<div class="outer">
<span class="banner">LOGO</span>
<div class="header">Header</div>
</div>
<div class="content">Content</div>
css ..
.header {
background-color: #ccc;
width: 100%;
position: fixed;
top: 0;
bottom: auto;
}
.outer {
background-color: #fff;
position: relative;
height: 100px;
}
.outer .banner {
font-size: 46px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
color: blue;
background-color: #fff;
margin-top: 100px;
}
Before scroll ..
After scroll ..