修复了滚动块内的标题

Question

我正在尝试创建一个块，它可能有也可能没有滚动条，但标题不会滚动。诀窍是标题的宽度应该受到滚动条的影响。

我担心这是那些应该是微不足道的CSS用例之一，但实际上可能是不可能的。有谁愿意证明我错了吗？

Answer 1

以下是一些指示

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

Answer 2

单独使用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 3

我还没有弄清楚如何单独使用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。标题必须在外部滚动元素。

Working example