固定滚动块内的标题答案

【问题标题】：Fixed header inside scrolling block固定滚动块内的标题
【发布时间】：2011-07-10 19:55:08
【问题描述】：

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

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

【问题讨论】：

标签： html css header overflow fixed

【解决方案1】：

这里有几点建议

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

其中涉及带有固定标题和滚动正文的表格

【讨论】：

谢谢，克莱德。但是，您错过了问题的关键点：标题在视觉上位于包含框内。这些链接显示标题与滚动条分开的表格。

【解决方案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/查看工作示例

【讨论】：

这在我的浏览器 (Chrome 10) 中看起来不太好。当我滚动时，标题会闪烁并反弹。
谢谢，侯赛因。我刚刚发布了一个仅在滚动元素的内容或大小发生变化时才需要 JavaScript 的答案。虽然它不是无缝的（你必须让它知道何时重新调整标题），但我喜欢其余时间的标题显示由 CSS 处理，所以它不会出现故障，而且你不会滚动时必须执行 JavaScript。
嘿，侯赛因。很抱歉让您久等了，我喜欢投赞成票。这个解决方案在我测试的大多数浏览器中都会导致严重的视觉故障，所以我认为，作为指导，它指向了错误的方向。

【解决方案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

【讨论】：