CSS: fixed title in a full-width fluid block

Question

css

To avoid wasting bytes on explanations, here's a sandbox stub: jsfiddle.net/RYCnH/

If you remove position:fixed; the header normally takes up the entire width, but goes up when scrolling. We want the .header block to take up the entire width of the .container block and remain visible on scroll.

Answer 1

header - position: absolute;
left: 0;

Answer 2

A small javascript with jQuery: I think this is about what you need :-)
$(document).ready(function(){
$(window).scroll(function(){
var header = $('.header').detach();
var scrollTop = $(window).scrollTop();
$('.container p').each(function(){
if ($(this).offset().top > scrollTop)
{
$(header).insertBefore(this);
header = null;
return false;
}
});
if (header)
{
$('.container').append(header);
}
});
});