Fixed header inside scrolling block

Question

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?

score 1 · Answer 1 · answered Mar 08 '11 at 04:57

1

Here are a few pointers

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

and there involve tables with fixed header and scrolling body

answered Mar 08 '11 at 04:57

Clyde Lobo

9,126
7
34
61

Thanks, Clyde. However, you're missing the key point of the question: that the header is visually inside the containing box. Those links show tables where the header is *separate from* the scrollbar. – s4y Mar 08 '11 at 18:12

score 1 · Answer 2 · answered Mar 08 '11 at 07:07

1

You cannot do this with CSS alone. We must use javaScript. With jQuery you can do the following

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

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

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

Check working example at http://jsfiddle.net/VswxL/2/

answered Mar 08 '11 at 07:07

Hussein

42,480
25
113
143

This doesn't look too good in my browser (Chrome 10). The header flickers and bounces around as I scroll. – s4y Mar 26 '11 at 17:32
Thanks, Hussein. I just posted an answer which needs JavaScript only when the content or size of the scrolling element changes. Though it's not seamless (you have to let it know when to re-fit the header), I like that the display of the header the rest of the time is handled with CSS, so it won't glitch, and you don't have to execute JavaScript while scrolling. – s4y Mar 26 '11 at 19:02
Hey, Hussein. I'm sorry to keep you waiting, and I love giving out upvotes. This solution causes serious visual glitches in most of the browsers I tested, so I think that, as a guide, it points in the wrong direction. – s4y Mar 26 '11 at 19:59

score 1 · Accepted Answer · answered Mar 26 '11 at 18:58

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.

Fixed header inside scrolling block

3 Answers3

Check working example at http://jsfiddle.net/VswxL/2/

Working example

Linked