固定滚动块内的标题 [英] Fixed header inside scrolling block

问题描述

我试图创建一个可能有滚动条或者没有滚动条的块，并且它的头部不滚动。诀窍是头部的宽度应该受到滚动条的影响。

我担心这是CSS应用的一个小例子，但实际上可能是不可能的。任何人都愿意证明我错了吗？

解决方案

我还没有想出如何用CSS来做到这一点。所以，这里有一个使用JavaScript（这里是jQuery）的解决方案，但只在内容发生变化时才运行。如果你的包装的大小取决于窗口的大小，你可能还需要在调整大小时运行它。这是它的核心：

  $。fn.fitTo = function（target）{
 var $ el = $ （这个）; 
 $（target）.bind（'refit'，function（）{
 $ el.width（this.clientWidth）; 
}）; 
 
  

调用 $ header.fitTo（$ content）将标题绑定到包含内容的元素上的自定义 refit 事件。现在，只要内容发生变化，滚动条可能已经出现或消失，请执行...

  $ content.trigger（'refit ）; 
  

...并且标题的宽度重置为 clientWidth 。标题必须在滚动元素的外部。



工作示例

I'm trying to create a block which may or may not have a scrollbar, with a header that does not scroll. The trick is that the width of the header should be affected by the presence of a scrollbar.

I'm worried that this is one of those CSS use cases which should be trivial, but might, in fact, be impossible. Anyone willing to prove me wrong?

解决方案

I haven't figured out how to do this with CSS alone. So, here's a solution which uses JavaScript (here, jQuery), but only runs when he content changes. If the size of your wrapper depends on the size of the window, you may also need to run it on resize. Here's the heart of it:

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

Call $header.fitTo($content) to bind the header to a custom refit event on the element with the content. Now, whenever the content changes such that a scroll bar may have appeared or disappeared, do…

$content.trigger('refit');

…and the width of the header is reset to the clientWidth of the element containing content. The header must be outside the scrolling element.

Working example

这篇关于固定滚动块内的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！