Skip to content

Instantly share code, notes, and snippets.

@oma
Forked from i-scorpion/README.txt
Created August 21, 2012 19:26

Revisions

  1. @i-scorpion i-scorpion revised this gist Jun 19, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions table-fixed-header.js
    Original file line number Diff line number Diff line change
    @@ -16,6 +16,7 @@ $.fn.fixedHeader = function (options) {
    var headTop = $head.length && $head.offset().top - config.topOffset;

    function processScroll() {
    if (!o.is(':visible')) return;
    var i, scrollTop = $win.scrollTop();
    var t = $head.length && $head.offset().top - config.topOffset;
    if (!isFixed && headTop != t) { headTop = t; }
  2. @i-scorpion i-scorpion revised this gist Jun 19, 2012. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions sample.html
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,7 @@
    <meta charset="utf-8">
    <title>Table Fixed Header</title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <!--script src="http://code.jquery.com/jquery-1.7.2.min.js"></script-->
    <script src="jquery.js"></script>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    <!-- CSS and JS for table fixed header -->
    <link rel="stylesheet" href="table-fixed-header.css">
  3. @i-scorpion i-scorpion revised this gist Jun 19, 2012. 3 changed files with 104 additions and 9 deletions.
    17 changes: 13 additions & 4 deletions README.txt
    Original file line number Diff line number Diff line change
    @@ -12,9 +12,9 @@ Create the table with following layout -
    </thead>
    <tbody>
    <tr>
    <th>Data Column 1</th>
    <th>Data Column 2</th>
    <th>Data Column 3</th>
    <td>Data Column 1</td>
    <td>Data Column 2</td>
    <td>Data Column 3</td>
    </tr>
    ...
    </tbody>
    @@ -23,4 +23,13 @@ Create the table with following layout -
    Add the css from the file "table-fixed-header.css"

    To apply it to above table, call -
    $('.table-fixed-header').fixedHeader();
    $('.table-fixed-header').fixedHeader();

    It can take two parameters -
    bgColor - background color of the fixed header
    topOffset - offset from top of windows where the fixed-header will be positioned (default is 40)
    If you use any other value for topOffset, update the "top" parameter CSS as well accordingly.

    For example, if there is no fixed navbar, you can set topOffset to 0 -
    $('.table-fixed-header').fixedHeader({topOffset: 0});
    Also update the CSS to - top: 0;
    84 changes: 84 additions & 0 deletions sample.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Table Fixed Header</title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <!--script src="http://code.jquery.com/jquery-1.7.2.min.js"></script-->
    <script src="jquery.js"></script>

    <!-- CSS and JS for table fixed header -->
    <link rel="stylesheet" href="table-fixed-header.css">
    <script src="table-fixed-header.js"></script>
    <style type="text/css">
    #mynav {
    top: 0;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1030;
    height:40px;
    color:#fff;
    background-color:#666;
    text-align: center;
    }
    body { padding-top:60px; }
    </style>
    </head>
    <body>
    <div class="container">
    <h2 id="mynav">| my navigation bar | my navigation bar | my navigation bar | my navigation bar |</h2>
    <h1>Table Fixed Header</h1>
    <table id="mytable" class="table table-bordered table-striped table-fixed-header">
    <thead class="header">
    <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Data Column 1</td>
    <td>Data Column 2</td>
    <td>Data Column 3</td>
    </tr>
    </tbody>
    </table>
    <h1>Another table</h1>
    <table id="mytable2" class="table table-bordered table-striped table-fixed-header">
    <thead class="header">
    <tr style="color:#00f;">
    <th>Column 11</th>
    <th>Column 22</th>
    <th>Column 33</th>
    <th>Column 44</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Data Column 11</td>
    <td>Data Column 22</td>
    <td>Data Column 33</td>
    <td>Data Column 44</td>
    </tr>
    </tbody>
    </table>
    </div>
    <script language="javascript" type="text/javascript" >
    $(document).ready(function(){
    // add 30 more rows to the table
    var row = $('table#mytable > tbody > tr:first');
    var row2 = $('table#mytable2 > tbody > tr:first');
    for (i=0; i<30; i++) {
    $('table#mytable > tbody').append(row.clone());
    $('table#mytable2 > tbody').append(row2.clone());
    }

    // make the header fixed on scroll
    $('.table-fixed-header').fixedHeader();
    });
    </script>
    </body>

    </html>
    12 changes: 7 additions & 5 deletions table-fixed-header.js
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,13 @@
    (function($) {

    $.fn.fixedHeader = function (options) {
    var config = {
    topOffset: 40,
    bgColor: '#EEEEEE'
    };
    if (options){ $.extend(config, options); }
    var config = {
    topOffset: 40,
    bgColor: '#EEEEEE'
    };
    if (options){ $.extend(config, options); }

    return this.each( function() {
    var o = $(this);

    var $win = $(window)
    @@ -46,6 +47,7 @@ $.fn.fixedHeader = function (options) {
    width: o.width(),
    'background-color':config.bgColor });
    processScroll();
    });
    };

    })(jQuery);
  4. @i-scorpion i-scorpion revised this gist Jun 19, 2012. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions table-fixed-header.js
    Original file line number Diff line number Diff line change
    @@ -25,17 +25,17 @@ $.fn.fixedHeader = function (options) {
    isFixed = 0;
    $head.removeClass('header-fixed');
    }
    isFixed ? $('thead.header-copy', o).removeClass('hide')
    : $('thead.header-copy', o).addClass('hide');
    }

    processScroll();
    $win.on('scroll', processScroll);

    // hack sad times - holdover until rewrite for 2.1
    $head.on('click', function () {
    if (!isFixed) setTimeout(function () { $win.scrollTop($win.scrollTop() - 47) }, 10);
    })

    $head.clone().removeClass('header header-fixed').appendTo(o);
    $head.clone().removeClass('header header-fixed').addClass('header-copy').appendTo(o);
    o.find('tbody > tr:first > td').each(function (i, h){
    var w = $(h).width();
    var d = $('<div>').css({overflow:'hidden', width: w});
    @@ -45,6 +45,7 @@ $.fn.fixedHeader = function (options) {
    $head.css({ margin:'0 auto',
    width: o.width(),
    'background-color':config.bgColor });
    processScroll();
    };

    })(jQuery);
  5. @i-scorpion i-scorpion revised this gist Jun 18, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion table-fixed-header.js
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,7 @@ $.fn.fixedHeader = function (options) {
    function processScroll() {
    var i, scrollTop = $win.scrollTop();
    var t = $head.length && $head.offset().top - config.topOffset;
    if (headTop > t) { headTop = t; }
    if (!isFixed && headTop != t) { headTop = t; }
    if (scrollTop >= headTop && !isFixed) {
    isFixed = 1;
    $head.addClass('header-fixed');
  6. @i-scorpion i-scorpion created this gist Jun 18, 2012.
    26 changes: 26 additions & 0 deletions README.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    Here is a simple jQuery plugin to make a table header fixed on top when window is scrolled.
    Using the code from twitter bootstrap documentation page, this code is customized for table header.

    Create the table with following layout -
    <table class="table-fixed-header">
    <thead class="header">
    <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th>Data Column 1</th>
    <th>Data Column 2</th>
    <th>Data Column 3</th>
    </tr>
    ...
    </tbody>
    </table>

    Add the css from the file "table-fixed-header.css"

    To apply it to above table, call -
    $('.table-fixed-header').fixedHeader();
    15 changes: 15 additions & 0 deletions table-fixed-header.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    table .header-fixed {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
    border-bottom: 1px solid #d5d5d5;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
    }
    50 changes: 50 additions & 0 deletions table-fixed-header.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    (function($) {

    $.fn.fixedHeader = function (options) {
    var config = {
    topOffset: 40,
    bgColor: '#EEEEEE'
    };
    if (options){ $.extend(config, options); }

    var o = $(this);

    var $win = $(window)
    , $head = $('thead.header', o)
    , isFixed = 0;
    var headTop = $head.length && $head.offset().top - config.topOffset;

    function processScroll() {
    var i, scrollTop = $win.scrollTop();
    var t = $head.length && $head.offset().top - config.topOffset;
    if (headTop > t) { headTop = t; }
    if (scrollTop >= headTop && !isFixed) {
    isFixed = 1;
    $head.addClass('header-fixed');
    } else if (scrollTop <= headTop && isFixed) {
    isFixed = 0;
    $head.removeClass('header-fixed');
    }
    }

    processScroll();
    $win.on('scroll', processScroll);

    // hack sad times - holdover until rewrite for 2.1
    $head.on('click', function () {
    if (!isFixed) setTimeout(function () { $win.scrollTop($win.scrollTop() - 47) }, 10);
    })

    $head.clone().removeClass('header header-fixed').appendTo(o);
    o.find('tbody > tr:first > td').each(function (i, h){
    var w = $(h).width();
    var d = $('<div>').css({overflow:'hidden', width: w});
    $(h).css({width: w});
    $head.find('> tr > th:eq('+i+')').append(d.clone());
    });
    $head.css({ margin:'0 auto',
    width: o.width(),
    'background-color':config.bgColor });
    };

    })(jQuery);