Исправлен заголовок внутри блока прокрутки

Question

Я пытаюсь создать блок, который может иметь или не иметь полосу прокрутки, с заголовком, который не прокручивается. Хитрость в том, что ширина заголовка должна зависеть от наличия полосы прокрутки.

Я обеспокоен тем, что это один из тех вариантов использования CSS, который должен быть тривиальным, но на самом деле может быть невозможным. Кто-нибудь хочет доказать, что я не прав?

Answer 1

Вы не можете сделать это только с помощью CSS. Мы должны использовать javaScript. С помощью jQuery вы можете сделать следующее

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

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

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

Проверьте рабочий пример на http://jsfiddle.net/VswxL/2/

Answer 2

Я не понял, как это сделать с помощью только 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');

… и ширина заголовка сбрасывается до clientWidth элемента, содержащего содержимое.Заголовок должен быть вне элемента прокрутки.

Рабочий пример

Answer 3

Вот несколько указателей

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

и включают таблицы с фиксированным заголовком и телом прокрутки

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