Freezing a header div

[Myke623]

An addon I created for my site displays a list of things:

http://virtuafighter.com/commands/list?ver=5fsa&chara=akira

All the lists begin with a header div (defined as a 'dl' element) that contain the column definitions. I would like for this header div to freeze at the top of the window once it scrolls out of view.

Anyone know the best way to achieve this? Ideally I'd want it to compatible with a responsive layout as well (mobile friendly, etc).

 

[Myke623]

In case the description wasn't clear, perhaps this image may help.



Again, any suggestions that would be compatible with the responsive layout would be appreciated.

 

[Falken]

The simplest thing I can think of is to use position: fixed on the bar, although you'll probably then have to adjust the existing CSS to align everything again.

 

[Myke623]

That would freeze it in-place. What I actually want is for it to be "fixed" only when it's going to scroll out of view.

 

[Falken]

Check the first answer to this stack:
http://stackoverflow.com/questions/14496240/how-can-i-stick-the-div-after-scrolling-down-a-little

 

[Myke623]

Once in a while, someone posts something that fills you with enough hope and inspiration to make you forgo your need for sleep at 11 PM, in favour of putting another agonising piece of puzzle in its place.

This is one of those times.

Falken, thank you.

 

[Myke623]

Playing around on my local dev environment, I've gotten the desired element to stick to the top (note position of scroll bar):



By adding the class 'stickyheader' to the header element, the jQuery I'm using is as follows:

function StickyHeader()
    {
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop   = $('.stickyheader').offset().top;
        var stickyHeaderLeft  = $('.stickyheader').offset().left;

        $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) 
            {
                $('.stickyheader').css({
                        position: 'fixed', 
                        top: '0px', 
                        left: stickyHeaderLeft, 
                        width: $('#cmdPanes').width()
                });
            }
            else 
            {
                $('.stickyheader').css({
                    position: 'static', 
                    top: '0px',
                    width: $('#cmdPanes').width()
                });
            }
        });
       
        $(window).resize(function(){
            $('.stickyheader').css({width: $('#cmdPanes').width()});
        });
    }

I've had to capture the left offset and width of the element based on it's containing div (#cmdPanes) to keep this header row aligned when it's fixed at the top.

It's behaves rather well (not perfectly) in my responsive layout, too.



Thanks again to @Falken for the tip!