1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Freezing a header div

Discussion in 'XenForo Development Discussions' started by Myke623, Jun 15, 2014.

  1. Myke623

    Myke623 Active Member

    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).
     
  2. Myke623

    Myke623 Active Member

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

    Capture.PNG

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

    Falken Member

    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.
     
  4. Myke623

    Myke623 Active Member

    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.
     
  5. Falken

    Falken Member

  6. Myke623

    Myke623 Active Member

    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.
     
  7. Myke623

    Myke623 Active Member

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

    Capture-2.PNG

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

    Code:
    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.

    Capture-3.PNG

    Thanks again to @Falken for the tip!
     
    Steve F likes this.

Share This Page