Fixed header inside scroll box

Question

I am trying to create a block that may or may not have a scrollbar, with a title that doesn't scroll. The trick is that the title bar should be influenced by the presence of the scroll bar.

I am worried that this is one of those uses of CSS that should be trivial but actually impossible. Anyone wanting to prove their wrong?

Answer 1

, CSS. , , JavaScript (, jQuery), . , . :

$.fn.fitTo = function(target){
    var $el = $(this);
    $(target).bind('refit', function(){
        $el.width(this.clientWidth);
    });
}

$header.fitTo($content), refit . , , , ...

$content.trigger('refit');

... reset clientWidth , . .

Answer 2

http://davidchambersdesign.com/css-fixed-position-headers/

• http://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header
• http://anaturb.net/csstips/sheader.htm

Answer 3

You cannot do this with CSS only. We must use javaScript. With jQuery you can do the following

var cw = $('#container').innerWidth(),
    cs = $('#container').scrollTop();

    $('#header').css({
        'width': cw + "px"
    });

    $('#container').scroll(function() {
        $('#header').css({
            'top': $('#container').scrollTop(),
        })
    })

Check out the working example http://jsfiddle.net/VswxL/2/