html - 固定滚动块内的标题

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包含内容的元素上的自定义事件。现在，每当内容发生变化以致滚动条出现或消失时，请...</p>

$content.trigger('refit');

…并且标题的宽度被重置为clientWidth包含内容的元素的宽度。标题必须在滚动元素之外。

工作示例