├── .editorconfig
├── .gitignore
├── .jshintrc
├── .travis.yml
├── CONTRIBUTING.md
├── Gruntfile.js
├── README.md
├── bower.json
├── demo
    ├── index.html
    ├── jquery-sticky-header-footer.js
    └── sticky-header-footer.css
├── dist
    ├── jquery-sticky-header-footer.js
    └── jquery-sticky-header-footer.min.js
├── package.json
└── src
    └── jquery-sticky-header-footer.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # This file is for unifying the coding style for different editors and IDEs
 2 | # editorconfig.org
 3 | 
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = tab
 8 | end_of_line = lf
 9 | charset = utf-8
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 | 
13 | [package.json]
14 | ; The indent size used in the `package.json` file cannot be changed
15 | ; https://github.com/npm/npm/pull/3180#issuecomment-16336516
16 | indent_size = 4
17 | indent_style = space
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "boss": true,
 3 |     "curly": true,
 4 |     "eqeqeq": true,
 5 |     "eqnull": true,
 6 |     "expr": true,
 7 |     "immed": true,
 8 |     "noarg": true,
 9 |     "onevar": true,
10 |     "quotmark": "single",
11 |     "unused": true,
12 |     "node": true
13 | }
14 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 0.10
4 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Before sending a pull request remember to follow [jQuery Core Style Guide](http://contribute.jquery.org/style-guide/js/).
 4 | 
 5 | 1. Fork it!
 6 | 2. Create your feature branch: `git checkout -b my-new-feature`
 7 | 3. Make your changes on the `src` folder, never on the `dist` folder.
 8 | 4. Commit your changes: `git commit -m 'Add some feature'`
 9 | 5. Push to the branch: `git push origin my-new-feature`
10 | 6. Submit a pull request :D
11 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | 
 3 |     grunt.initConfig({
 4 | 
 5 |         // Import package manifest
 6 |         pkg: grunt.file.readJSON("package.json"),
 7 | 
 8 |         // Banner definitions
 9 |         meta: {
10 |             banner: "/*\n" +
11 |                 " *  <%= pkg.title || pkg.name %> - v<%= pkg.version %>\n" +
12 |                 " *  <%= pkg.description %>\n" +
13 |                 " *  <%= pkg.homepage %>\n" +
14 |                 " *\n" +
15 |                 " *  Made by <%= pkg.author.name %>\n" +
16 |                 " *  Under <%= pkg.license %> License\n" +
17 |                 " */\n"
18 |         },
19 | 
20 |         // Concat definitions
21 |         concat: {
22 |             options: {
23 |                 banner: "<%= meta.banner %>"
24 |             },
25 |             dist: {
26 |                 src: ["src/jquery-sticky-header-footer.js"],
27 |                 dest: "dist/jquery-sticky-header-footer.js"
28 |             }
29 |         },
30 | 
31 |         // Copy definitions
32 |         copy: {
33 |             main: {
34 |                 src: ['dist/jquery-sticky-header-footer.js'],
35 |                 dest: 'demo/jquery-sticky-header-footer.js'
36 |             }
37 |         },
38 | 
39 |         // Lint definitions
40 |         jshint: {
41 |             files: ["src/jquery-sticky-header-footer.js"],
42 |             options: {
43 |                 jshintrc: ".jshintrc"
44 |             }
45 |         },
46 | 
47 |         // Minify definitions
48 |         uglify: {
49 |             my_target: {
50 |                 src: ["dist/jquery-sticky-header-footer.js"],
51 |                 dest: "dist/jquery-sticky-header-footer.min.js"
52 |             },
53 |             options: {
54 |                 banner: "<%= meta.banner %>"
55 |             }
56 |         },
57 | 
58 |         // watch for changes to source
59 |         // Better than calling grunt a million times
60 |         // (call 'grunt watch')
61 |         watch: {
62 |             files: ['src/*'],
63 |             tasks: ['default']
64 |         }
65 | 
66 |     });
67 | 
68 |     grunt.loadNpmTasks("grunt-contrib-concat");
69 |     grunt.loadNpmTasks("grunt-contrib-copy");
70 |     grunt.loadNpmTasks("grunt-contrib-jshint");
71 |     grunt.loadNpmTasks("grunt-contrib-uglify");
72 |     grunt.loadNpmTasks("grunt-contrib-watch");
73 | 
74 |     grunt.registerTask("build", ["concat", "uglify", "copy"]);
75 |     grunt.registerTask("default", ["jshint", "build"]);
76 |     grunt.registerTask("travis", ["default"]);
77 | 
78 | };
79 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # jQuery Sticky Header Footer
 2 | jQuery plugin that dynamically sticks content headers and footers to the top and bottom of viewport.
 3 | 
 4 | ## Usage
 5 |     $("table").stickyHeaderFooter();
 6 | 
 7 |     $("table").stickyHeaderFooter({
 8 |         bodySelector: '.list-body',            // default is 'tbody'
 9 |         bottom: '20px',                        // default is '0'
10 |         footerSelector: '.list-footer',        // default is 'tfoot'
11 |         headerSelector: '.list-header',        // default is 'thead'
12 |         top: '60px'                            // default is '0'
13 |     });
14 | 
15 |     $("table").stickyHeaderFooter('tearDown'); // call tearDown method to remove added elements, jquery data and event listeners
16 | 
17 | ## How does it work?
18 | Sticky Header Footer makes a clone of the desired sticky header and/or footer and places it in a DIV above or below the original stuck component. Clones are used in order to simplify maintaining layout (especially with tables). The clones are swapped when stuck and unstuck to ensure DOM updates to the header and/or footer are visible.
19 | 
20 | ## Markup structure
21 | ### Tables
22 | For best results when applying Sticky Header Footer to a table, pass the table itself as the element to be processed.
23 | 
24 |     <table>                                         <!-- Pass this element to the plugin -->
25 |         <colgroup>                                  <!-- Use colgroup to maintain th layout -->
26 |             <col style="width: 33.3%">
27 |             <col style="width: 33.3%">
28 |             <col style="width: 33.3%">
29 |         </colgroup>
30 |         <thead>                                     <!-- Header element (by default) -->
31 |             <tr>
32 |                 <th>Header text</th>
33 |                 <th>Header text</th>
34 |                 <th>Header text</th>
35 |             </tr>
36 |         </thead>
37 |         <tbody>                                     <!-- Body element (by default) -->
38 |             <tr>
39 |                 <td>Body text (row 1)</td>
40 |                 <td>Body text (row 1)</td>
41 |                 <td>Body text (row 1)</td>
42 |             </tr>
43 |             <tr>
44 |                 <td>Body text (row 2)</td>
45 |                 <td>Body text (row 2)</td>
46 |                 <td>Body text (row 2)</td>
47 |             </tr>
48 |         </tbody>
49 |         <tfoot>                                     <!-- Footer element (by default) -->
50 |             <tr>
51 |                 <td colspan="3">Footer text</td>
52 |             </tr>
53 |         </tfoot>
54 |     </table>
55 | 
56 | ### Other elements
57 | It's important to remember that Sticky Header Footer requires a wrapper element around the elements that define the header, footer and body of your Sticky Header Footer list.
58 | 
59 |     <div class="list-wrapper">                      <!-- Pass this element to the plugin -->
60 |         <div class="list-header">                   <!-- Header element (footerSelector=".list-header") -->
61 |             ...
62 |         </div>
63 |         <div class="list-body">                     <!-- Body element (footerSelector=".list-body") -->
64 |             ...
65 |         </div>
66 |         <div class="list-footer">                   <!-- Footer element (footerSelector=".list-footer") -->
67 |             ...
68 |         </div>
69 |     </div>
70 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "jquery-sticky-header-footer",
 3 |     "version": "1.2.11",
 4 |     "homepage": "https://github.com/kboucher/jquery-sticky-header-footer",
 5 |     "authors": [
 6 |         "Kevin Boucher <kevin@kevinboucher.com>"
 7 |     ],
 8 |     "description": "jQuery plugin that dynamically sticks content headers and footers to the top and bottom of viewport.",
 9 |     "main": "src/jquery-sticky-header-footer.js",
10 |     "keywords": [
11 |         "jquery-plugin",
12 |         "jquery",
13 |         "ui",
14 |         "sticky"
15 |     ],
16 |     "license": "MIT"
17 | }
18 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3 | <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4 | <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  5 | <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  6 |     <head>
  7 |         <meta charset="utf-8">
  8 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9 |         <title>jQuery Sticky Header Footer Demo</title>
 10 |         <meta name="description" content="">
 11 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 12 |         <link rel="stylesheet" href="sticky-header-footer.css">
 13 | 
 14 |         <!-- Prevent 404 on favicon.ico -->
 15 |         <link rel="shortcut icon" href="data:image/png;base64,">
 16 |     </head>
 17 |     <body>
 18 |         <div class="container">
 19 |             <div class="header">
 20 |                 <h1>Lorem Ipsum Nulla in Laborum</h1>
 21 |             </div>
 22 |             <div class="main-content">
 23 |                 <table class="table">
 24 |                     <thead>
 25 |                         <tr>
 26 |                             <th>Name</th>
 27 |                             <th>Description</th>
 28 |                         </tr>
 29 |                     </thead>
 30 |                     <tbody>
 31 |                         <tr>
 32 |                             <td>Lorem ipsum Aliquip id est reprehenderit anim.</td>
 33 |                             <td>Lorem ipsum Pariatur esse laboris anim qui tempor incididunt aliquip anim dolore non aute aliqua veniam sed aliquip reprehenderit aliquip.</td>
 34 |                         </tr>
 35 |                         <tr>
 36 |                             <td>Lorem ipsum Aliqua eu ut minim magna ullamco.</td>
 37 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores esse similique dolorum, aspernatur id? Libero, ipsa quia aspernatur mollitia excepturi voluptatum, obcaecati distinctio totam atque qui illum perferendis laudantium odit.</td>
 38 |                         </tr>
 39 |                         <tr>
 40 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint cupiditate repellendus saepe consequuntur earum, explicabo ipsam veritatis at sequi recusandae perferendis sed laboriosam commodi pariatur asperiores numquam, expedita iusto animi.</td>
 41 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, aperiam, dolorem! Quo optio id ad porro aut, incidunt eveniet quibusdam soluta illum. Porro animi in sed voluptatibus laborum illum aliquam.</td>
 42 |                         </tr>
 43 |                         <tr>
 44 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
 45 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
 46 |                         </tr>
 47 |                         <tr>
 48 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
 49 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
 50 |                         </tr>
 51 |                         <tr>
 52 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
 53 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
 54 |                         </tr>
 55 |                         <tr>
 56 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
 57 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
 58 |                         </tr>
 59 |                         <tr>
 60 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
 61 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
 62 |                         </tr>
 63 |                         <tr>
 64 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
 65 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
 66 |                         </tr>
 67 |                         <tr>
 68 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
 69 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
 70 |                         </tr>
 71 |                     </tbody>
 72 |                     <tfoot>
 73 |                         <tr>
 74 |                             <td>&nbsp;</td>
 75 |                             <td class="text-right">Faux Total: $712.03</td>
 76 |                         </tr>
 77 |                     </tfoot>
 78 |                 </table>
 79 |                 <br><br><br>
 80 | 
 81 |                 <table class="table">
 82 |                     <thead>
 83 |                         <tr>
 84 |                             <th>Description</th>
 85 |                             <th>Name</th>
 86 |                         </tr>
 87 |                     </thead>
 88 |                     <tbody>
 89 |                         <tr>
 90 |                             <td>Lorem ipsum Pariatur esse laboris anim qui tempor incididunt aliquip anim dolore non aute aliqua veniam sed aliquip reprehenderit aliquip.</td>
 91 |                             <td>Lorem ipsum Aliquip id est reprehenderit anim.</td>
 92 |                         </tr>
 93 |                         <tr>
 94 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores esse similique dolorum, aspernatur id? Libero, ipsa quia aspernatur mollitia excepturi voluptatum, obcaecati distinctio totam atque qui illum perferendis laudantium odit.</td>
 95 |                             <td>Lorem ipsum Aliqua eu ut minim magna ullamco.</td>
 96 |                         </tr>
 97 |                         <tr>
 98 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, aperiam, dolorem! Quo optio id ad porro aut, incidunt eveniet quibusdam soluta illum. Porro animi in sed voluptatibus laborum illum aliquam.</td>
 99 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint cupiditate repellendus saepe consequuntur earum, explicabo ipsam veritatis at sequi recusandae perferendis sed laboriosam commodi pariatur asperiores numquam, expedita iusto animi.</td>
100 |                         </tr>
101 |                         <tr>
102 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
103 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
104 |                         </tr>
105 |                         <tr>
106 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
107 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
108 |                         </tr>
109 |                         <tr>
110 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
111 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
112 |                         </tr>
113 |                         <tr>
114 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
115 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
116 |                         </tr>
117 |                         <tr>
118 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
119 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
120 |                         </tr>
121 |                         <tr>
122 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
123 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
124 |                         </tr>
125 |                         <tr>
126 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quidem quae optio expedita, delectus magnam. Ipsum modi amet velit consequatur saepe quae voluptatem quibusdam illum nisi, aliquid aperiam eius possimus?</td>
127 |                             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum, minus, ea dolorem pariatur, aperiam incidunt vero iure nostrum atque, consequuntur. Quas nihil vitae ab, recusandae illo dolorum et corrupti.</td>
128 |                         </tr>
129 |                     </tbody>
130 |                     <tfoot>
131 |                         <tr>
132 |                             <td>Faux Total: $712.03</td>
133 |                             <td>&nbsp;</td>
134 |                         </tr>
135 |                     </tfoot>
136 |                 </table>
137 |             </div>
138 |             <div class="additional-content">
139 |                 <p class="citation">&#8220;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti aut in corrupti ullam mollitia qui, laudantium molestiae adipisci, eos cupiditate, praesentium dicta ducimus. Similique officia vel, perspiciatis ut odit, debitis?&#8221;</p>
140 |             </div>
141 |         </div>
142 | 
143 |         <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
144 |         <script src="jquery-sticky-header-footer.js"></script>
145 |         <script>
146 |             $(document).ready(function() {
147 |                 $("table").stickyHeaderFooter(/*{
148 |                     bottom: '20px',
149 |                     top: '60px'
150 |                 }*/);
151 |             });
152 |         </script>
153 |     </body>
154 | </html>
155 | 


--------------------------------------------------------------------------------
/demo/jquery-sticky-header-footer.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  *  jquery-sticky-header-footer - v1.2.11
  3 |  *  jQuery plugin that dynamically sticks content headers and footers to the top and bottom of viewport.
  4 |  *  https://github.com/kboucher
  5 |  *
  6 |  *  Made by Kevin Boucher
  7 |  *  Under MIT License
  8 |  */
  9 | /**
 10 |  *  jquery-sticky-header-footer
 11 |  *  Lightweight jQuery plugin providing sticky header and footer functionality for tables and lists.
 12 |  *
 13 |  *  @module     jquery-sticky-header-footer
 14 |  *  @extends    jQuery
 15 |  *
 16 |  *  @example
 17 |  *      // Configuration object is optional if setting up a table
 18 |  *      // with a sticky header and sticky footer.
 19 |  *      $(<your-list-container>).stickyHeaderFooter({
 20 |  *          // these are in the context of <your-list-container>
 21 |  *          bodySelector: '<body-selector>',       // {String} default is 'tbody'
 22 |  *          footerSelector: '<footer-selector>',   // {String} default is 'tfoot'
 23 |  *          headerSelector: '<header-selector>'    // {String} default is 'thead',
 24 |  *          top: '<number><units>',                // {String} (CSS value) default is '0'
 25 |  *          bottom: '<number><units>'              // {String} (CSS value) default is '0'
 26 |  *      });
 27 |  *
 28 |  *  @author     Kevin Boucher
 29 |  *  @license    Dual licensed under MIT and GNU GPL
 30 |  */
 31 | ;(function($, window, document, undefined) {
 32 |     'use strict';
 33 | 
 34 |     // Defaults and constants
 35 |     var pluginName = 'stickyHeaderFooter',
 36 |         defaults = {
 37 |             bodySelector: 'tbody',
 38 |             footerSelector: 'tfoot',
 39 |             headerSelector: 'thead',
 40 |             top: '0',
 41 |             bottom: '0',
 42 |             zIndex: 10
 43 |         },
 44 |         classNames = {
 45 |             innerWrapper: 'sticky-header-footer_sticky-wrapper',
 46 |             innerWrapperHead: 'sticky-header-footer_sticky-header',
 47 |             innerWrapperFoot: 'sticky-header-footer_sticky-footer',
 48 |             outerWrapper: 'sticky-header-footer_wrapper',
 49 |             originalFooter: 'sticky-header-footer_original-footer',
 50 |             originalHeader: 'sticky-header-footer_original-header'
 51 |         },
 52 |         methods = {
 53 | 
 54 |             /**
 55 |                 Handle any required tear down.
 56 |                  - Remove scroll event handlers
 57 | 
 58 |                 @method tearDown
 59 |              */
 60 |             tearDown: function() {
 61 |                 var $this = $(this);
 62 |                 var $instance = $this.data()['plugin_' + pluginName];
 63 |                 var $element = $this;
 64 | 
 65 |                 if(!$instance) {
 66 |                     return;
 67 |                 }
 68 | 
 69 |                 window.removeEventListener('scroll', $instance._scrollHandler);
 70 |                 window.removeEventListener('resize', $instance._resizeHandlerHandler);
 71 |                 window.removeEventListener('orientationchange', $instance._orientationHandler);
 72 | 
 73 |                 /**
 74 |                  *  Fix for Chrome rendering bug (see above)
 75 |                  */
 76 |                 window.removeEventListener('scroll', $instance._scrollStopHandler);
 77 | 
 78 |                 /**
 79 |                     Remove added DOM elements and plugin data
 80 |                  */
 81 |                 $.each([$instance.footerElement, $instance.headerElement], function(idx, element) {
 82 |                     if (element) {
 83 |                         if (element.isStuck) {
 84 |                             $instance.unstick.call($instance, element);
 85 |                         }
 86 |                         $(element.stickyClone).remove();
 87 |                     }
 88 |                 });
 89 |                 $element.closest('.' + classNames.outerWrapper).before($element[0]).remove();
 90 |                 $element.removeData('plugin_' + pluginName);
 91 |             }
 92 |         },
 93 |         swapNodes = function(a, b) {
 94 |             var aParent = a.parentNode;
 95 |             var aSibling = a.nextSibling === b ? a : a.nextSibling;
 96 |             b.parentNode.insertBefore(a, b);
 97 |             aParent.insertBefore(b, aSibling);
 98 |         },
 99 |         throttle = function(fn, threshhold, scope) {
100 |             threshhold || (threshhold = 250);
101 | 
102 |             var last, deferTimer;
103 | 
104 |             return function() {
105 |                 var context = scope || this,
106 |                     now = +new Date(),
107 |                     args = arguments;
108 | 
109 |                 if (last && now < last + threshhold) {
110 |                     // hold on to it
111 |                     clearTimeout(deferTimer);
112 |                     deferTimer = setTimeout(function() {
113 |                         last = now;
114 |                         fn.apply(context, args);
115 |                     }, threshhold);
116 |                 } else {
117 |                     last = now;
118 |                     fn.apply(context, args);
119 |                 }
120 |             };
121 |         },
122 |         debounce = function(fn, delay) {
123 |             var timer = null;
124 | 
125 |             return function() {
126 |                 var context = this,
127 |                     args = arguments;
128 |                 clearTimeout(timer);
129 |                 timer = setTimeout(function() {
130 |                     fn.apply(context, args);
131 |                 }, delay);
132 |             };
133 |         };
134 | 
135 |     // StickyHeaderFooter constructor
136 |     function StickyHeaderFooter(element, options) {
137 |         this.element = element;
138 |         this.settings = $.extend({}, defaults, options);
139 | 
140 |         this.bodyElement = $(this.settings.bodySelector, this.element)[0];
141 |         this.footerElement = $(this.settings.footerSelector, this.element)[0];
142 |         this.headerElement = $(this.settings.headerSelector, this.element)[0];
143 | 
144 |         this.isTable = this.element.tagName.toLowerCase() === 'table';
145 |         this.isVisible = function() {
146 |             var elmRect = this.element.getBoundingClientRect();
147 |             return elmRect.top < window.innerHeight && elmRect.bottom > 0;
148 |         };
149 | 
150 |         this._defaults = defaults;
151 |         this._name = pluginName;
152 |         this._scrollHandler = null;
153 |         this._resizeHandler = null;
154 |         this._orientationHandler = null;
155 |         this._width = null;
156 | 
157 |         this.init();
158 |     }
159 | 
160 |     $.extend(StickyHeaderFooter.prototype, {
161 | 
162 |         /**
163 |          *  Initializes DOM and sets event listeners.
164 |          *
165 |          *  @method init
166 |          */
167 |         init: function() {
168 |             var throttleRate = 66;
169 | 
170 |             // Add DOM wrapper to provide known reference point
171 |             $(this.element).wrap('<div class="' + classNames.outerWrapper + '"></div>');
172 | 
173 |             if (this.footerElement || this.headerElement) {
174 | 
175 |                 // Clone, wrap, decorate and store references to header/footer.
176 |                 if (this.footerElement) {
177 |                     this.setupHeaderFooter(true);
178 |                     this.footerElement.isFooter = true;
179 |                 }
180 | 
181 |                 if (this.headerElement) {
182 |                     this.setupHeaderFooter();
183 |                 }
184 | 
185 |                 /**
186 |                  *   1. Store and add scroll event listener
187 |                  *      (Storing before assigning seems to uncover a Chrome repaint/redraw bug.)
188 |                  *   2. Trigger scroll event (initialize sticky header/footer positions)
189 |                  */
190 |                 document.addEventListener(
191 |                     'scroll',
192 |                     this._scrollHandler = throttle(this.watchHeaderFooter.bind(this), throttleRate)
193 |                 );
194 | 
195 |                 /**
196 |                  *  Fix for Chrome rendering bug (force repaint)
197 |                  *
198 |                  *  Sometimes in Chrome it is possible to have the sticky header still stuck to
199 |                  *  the top of the viewport even though the real header is well below it in the screen.
200 |                  *
201 |                  *  The obvious assumption is that there is an issue with the throttling that is causing
202 |                  *  that element not to be hidden when the real header scrolls back into view. However,
203 |                  *  inspecting the element will show that the CSS is in fact updated (has display:none).
204 |                  *
205 |                  *  The following code is a workaround for this Chrome issue and essentially forces a
206 |                  *  repaint when scrolling has stopped. (includes a line in tearDown())
207 |                  */
208 |                 document.addEventListener(
209 |                     'scroll',
210 |                     this._scrollStopHandler = debounce(function() {
211 |                         $('.'.concat(classNames.innerWrapper)).css('transform', 'translateZ(0)');
212 |                     }, throttleRate)
213 |                 );
214 | 
215 |                 /**
216 |                  *  Resizes sticky elements as needed on resize or orientation change.
217 |                  *
218 |                  */
219 |                 window.addEventListener(
220 |                     'resize',
221 |                     this._resizeHandler = throttle(this.watchParentWidth.bind(this), throttleRate)
222 |                 );
223 |                 window.addEventListener(
224 |                     'orientationchange',
225 |                     this._orientationHandler = this.watchParentWidth.bind(this)
226 |                 );
227 | 
228 |                 /**
229 |                  *  Trigger scroll event to initialize sticky header/footer positions.
230 |                  *
231 |                  *  - Wrapped in try block to overcome bug in IE
232 |                  */
233 |                 try {
234 |                     document.dispatchEvent(new Event('scroll'));
235 |                 } catch (e) {}
236 |             }
237 |         },
238 | 
239 |         /**
240 |          *  Decorates DOM elements to support sticky functionality.
241 |          *
242 |          *  @method setupHeaderFooter
243 |          *  @param {Boolean} Is this a sticky footer?
244 |          */
245 |         setupHeaderFooter: function(isFooter) {
246 |             var insertAction = isFooter ? 'insertAfter' : 'insertBefore',
247 |                 element = isFooter ? 'footerElement' : 'headerElement',
248 |                 colgroup = $(this.element).find('colgroup:first'),
249 |                 originalClassName = isFooter ?
250 |                     classNames.originalFooter :
251 |                     classNames.originalHeader,
252 |                 wrapperClasses = [
253 |                     classNames.innerWrapper,
254 |                     isFooter ? classNames.innerWrapperFoot : classNames.innerWrapperHead
255 |                 ];
256 | 
257 |             /**
258 |                 1. Create and store header/footer clone
259 |                 2. Wrap with sticky-header-footer DIV
260 |                 3. Conditionally wrap with TABLE (THEAD/TFOOT only)
261 |                 5. Hide clone
262 |                 6. Append to DOM
263 |              */
264 |             this[element].stickyClone = $(this[element]).clone(false)
265 |                 .wrap(
266 |                     $('<div></div>').css({
267 |                         bottom: isFooter ? this.settings.bottom : 'auto',
268 |                         position: 'fixed',
269 |                         top: !isFooter ? this.settings.top : 'auto',
270 |                         'z-index': this.settings.zIndex,
271 |                     }).addClass(wrapperClasses.join(' '))
272 |                 )
273 |                 .wrap(function() {
274 |                     var classNames = this.element.getAttribute('class');
275 |                     if (this.isTable) {
276 |                         return $('<table></table>').addClass(classNames);
277 |                     }
278 |                     return '';
279 |                 }.bind(this)).parents('.' + classNames.innerWrapper)
280 |                 .css('display', 'none')[insertAction](this.element)[0];
281 | 
282 |             /**
283 |                 Decorate original header and footer elements to
284 |                 differentiate them from clones at runtime.
285 |              */
286 |             $(this[element]).addClass(originalClassName);
287 | 
288 |             /**
289 |                 Support use of colgroup to maintain cell sizes on cloned and
290 |                 fixed header/footer elements.
291 | 
292 |                 * Valid with tables only
293 |              */
294 |             if (colgroup) {
295 |                 colgroup.clone(false).appendTo($(this[element].stickyClone).find('table'));
296 |             }
297 |         },
298 | 
299 |         /**
300 |          *  Swaps clone and source elements and displays clone container.
301 |          *  Also sets width to overcome deficiency when element is
302 |          *  instantiated in a non-visible state.
303 |          *  ("0px" width is applied in setupHeaderFooter().)
304 |          *
305 |          *  @method stick
306 |          *  @param {HTMLElement} The header or footer item to be stuck.
307 |          */
308 |         stick: function(elem) {
309 |             var settings = this.settings,
310 |                 selector = elem.isFooter ? settings.footerSelector : settings.headerSelector,
311 |                 width = $(elem).parents('.'.concat(classNames.outerWrapper + ':first')).width();
312 | 
313 |             swapNodes(
314 |                 elem,
315 |                 elem.stickyClone.querySelector(selector)
316 |             );
317 | 
318 |             // Store current width
319 |             this._width = width;
320 | 
321 |             // Set element state and sticky styles
322 |             elem.isStuck = true;
323 |             elem.stickyClone.style.display = 'block';
324 |             elem.stickyClone.style.width = width + 'px';
325 |         },
326 | 
327 |         /**
328 |          *  Swaps clone and source back to original location and hides clone container.
329 |          *
330 |          *  @method unstick
331 |          *  @param {HTMLElement} The header or footer item to be unstuck.
332 |          */
333 |         unstick: function(elem) {
334 |             var settings = this.settings,
335 |                 selector = elem.isFooter ? settings.footerSelector : settings.headerSelector;
336 | 
337 |             swapNodes(
338 |                 elem,
339 |                 this.element.querySelector(selector)
340 |             );
341 | 
342 |             elem.isStuck = false;
343 |             elem.stickyClone.style.display = 'none';
344 |         },
345 | 
346 |         /**
347 |          *  If sticky footer is enabled, this method will be called
348 |          *  on scroll to make any required updates to the footer.
349 |          *
350 |          *  @method watchFooter
351 |          *  @param {HTMLElement} The sticky footer item to be processed.
352 |          */
353 |         watchFooter: function(footer) {
354 |             var bodyRect = this.bodyElement.getBoundingClientRect(),
355 |                 footAdjust = parseInt(this.settings.bottom, 10),
356 |                 footRect = footer.getBoundingClientRect(),
357 |                 viewHeight = window.innerHeight;
358 | 
359 |             if (footer.isStuck) {
360 | 
361 |                 /**
362 |                     Unstick this sticky-header-footer's footer element if:
363 |                         1. Footer has moved above bottom of viewport, OR ...
364 |                         2. Header has scrolled to the footer, OR ...
365 |                         3. Sticky Header Footer element is no longer visible in the viewport
366 |                  */
367 |                 if (bodyRect.bottom < viewHeight - footAdjust - footRect.height ||
368 |                     bodyRect.top > viewHeight - footAdjust ||
369 |                     !this.isVisible()) {
370 |                     this.unstick.call(this, footer);
371 |                 }
372 |             } else {
373 | 
374 |                 /**
375 |                     Stick this sticky-header-footer's footer element if:
376 |                         1. Footer element is below bottom of the viewport, AND ...
377 |                         2. Header is above sticky footer, AND ...
378 |                         3. Sticky Header Footer element is visible in the viewport
379 |                  */
380 |                 if (bodyRect.bottom > viewHeight - footAdjust - footRect.height &&
381 |                     bodyRect.top < viewHeight - footAdjust &&
382 |                     this.isVisible()) {
383 |                     this.stick.call(this, footer);
384 |                 }
385 |             }
386 |         },
387 | 
388 |         /**
389 |          *  If sticky footer is enabled, this method will be called
390 |          *  on scroll to make any required updates to the footer.
391 |          *
392 |          *  @method watchHeader
393 |          *  @param {HTMLElement} The sticky header item to be processed.
394 |          */
395 |         watchHeader: function(header) {
396 |             var bodyRect = this.bodyElement.getBoundingClientRect(),
397 |                 headAdjust = parseInt(this.settings.top, 10),
398 |                 headRect = header.getBoundingClientRect();
399 | 
400 |             if (header.isStuck) {
401 | 
402 |                 /**
403 |                     Unstick this sticky-header-footer's header element if:
404 |                         1. Top of the header is below the top of the sticky header, OR ...
405 |                         2. Footer is under the sticky header
406 |                  */
407 |                 if (bodyRect.top > headAdjust + headRect.height ||
408 |                     bodyRect.bottom < headAdjust + headRect.height / 2) {
409 |                     this.unstick.call(this, header);
410 |                 }
411 |             } else {
412 | 
413 |                 /**
414 |                     Stick this sticky-header-footer's header element if:
415 |                         1. Top of the header is at the top of the viewport (or custom position), AND ...
416 |                         2. Footer is below the bottom of the potential sticky header
417 |                  */
418 |                 if (bodyRect.top <= headAdjust + headRect.height &&
419 |                     bodyRect.bottom > headAdjust + headRect.height) {
420 |                     this.stick.call(this, header);
421 |                 }
422 |             }
423 |         },
424 | 
425 |         /**
426 |          *  Delegates scroll event handling to specific header
427 |          *  and footer DOM manipulation methods.
428 |          *
429 |          *  @method watchHeaderFooter
430 |          */
431 |         watchHeaderFooter: function(/* event */) {
432 |             if (!!this.footerElement) {
433 |                 this.watchFooter(this.footerElement);
434 |             }
435 | 
436 |             if (!!this.headerElement) {
437 |                 this.watchHeader(this.headerElement);
438 |             }
439 |         },
440 | 
441 |         /**
442 |             Adjusts sticky elements' widths when container width changes.
443 | 
444 |             @method watchParentWidth
445 |          */
446 |         watchParentWidth: function(/* event */) {
447 |             var width = $(this.element)
448 |                     .parents('.' + classNames.outerWrapper + ':first')
449 |                     .width();
450 | 
451 |             if (this._width && this._width !== width) {
452 |                 if (!!this.footerElement) {
453 |                     this.footerElement.stickyClone.style.width = width + 'px';
454 |                 }
455 | 
456 |                 if (!!this.headerElement) {
457 |                     this.headerElement.stickyClone.style.width = width + 'px';
458 |                 }
459 |             }
460 |         },
461 | 
462 |         /**
463 |             Call `methods.tearDown()`
464 | 
465 |             Maintains backwards compatitibility after exposing
466 |             tearDown() as a method.
467 | 
468 |             @method tearDown
469 |          */
470 |         tearDown: function() {
471 |             methods.tearDown.call(this);
472 |         }
473 |     });
474 | 
475 |     /**
476 |         Lightweight wrapper around the constructor,
477 |         preventing multiple instantiations.
478 |     */
479 |     $.fn[pluginName] = function(methodOrOptions) {
480 |         if (methods[methodOrOptions]) {
481 |             return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
482 |         } else {
483 |             return this.each(function() {
484 |                 if (!$.data(this, 'plugin_' + pluginName)) {
485 |                     $.data(this, 'plugin_' + pluginName, new StickyHeaderFooter(this, methodOrOptions));
486 |                 }
487 |             });
488 |         }
489 |     };
490 | 
491 | })(jQuery, window, document);
492 | 


--------------------------------------------------------------------------------
/demo/sticky-header-footer.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Demo styles (not required)
 3 |  */
 4 | * {
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     box-sizing: border-box;
 8 | }
 9 | 
10 | body {
11 |     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
12 |     font-size: 16px;
13 | }
14 | 
15 | h1 {
16 |     font-size: 3.14rem;
17 | }
18 | 
19 | .text-right {
20 |     text-align: right;
21 | }
22 | 
23 | .container {
24 |     margin: 30px auto;
25 |     width: 60%;
26 | }
27 | 
28 | .header {
29 |     margin-bottom: 60px;
30 | }
31 | 
32 | .additional-content {
33 |     margin: 8rem 0;
34 | }
35 | 
36 | .citation {
37 |     color: #999;
38 |     font-size: 3.14em;
39 |     font-style: italic;
40 |     margin: 30px 60px;
41 |     text-align: center;
42 | }
43 | 
44 | .table {
45 |     border-collapse: collapse;
46 | 
47 |     /**
48 |         Maintains layout when header/footer
49 |         are removed from their table context.
50 |      */
51 |     table-layout: fixed;
52 |     width: 100%;
53 | }
54 | 
55 | .table td,
56 | .table th {
57 |     background: #fff;
58 |     padding: 15px;
59 | }
60 | 
61 | .table th {
62 |     border-bottom: solid #999 2px;
63 |     font-weight: bold;
64 | }
65 | 
66 | .table tbody td {
67 |     border-bottom: solid #ccc 1px;
68 | }
69 | 
70 | .table tfoot td {
71 |     border-top: solid #999 2px;
72 | }
73 | 


--------------------------------------------------------------------------------
/dist/jquery-sticky-header-footer.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  *  jquery-sticky-header-footer - v1.2.11
  3 |  *  jQuery plugin that dynamically sticks content headers and footers to the top and bottom of viewport.
  4 |  *  https://github.com/kboucher
  5 |  *
  6 |  *  Made by Kevin Boucher
  7 |  *  Under MIT License
  8 |  */
  9 | /**
 10 |  *  jquery-sticky-header-footer
 11 |  *  Lightweight jQuery plugin providing sticky header and footer functionality for tables and lists.
 12 |  *
 13 |  *  @module     jquery-sticky-header-footer
 14 |  *  @extends    jQuery
 15 |  *
 16 |  *  @example
 17 |  *      // Configuration object is optional if setting up a table
 18 |  *      // with a sticky header and sticky footer.
 19 |  *      $(<your-list-container>).stickyHeaderFooter({
 20 |  *          // these are in the context of <your-list-container>
 21 |  *          bodySelector: '<body-selector>',       // {String} default is 'tbody'
 22 |  *          footerSelector: '<footer-selector>',   // {String} default is 'tfoot'
 23 |  *          headerSelector: '<header-selector>'    // {String} default is 'thead',
 24 |  *          top: '<number><units>',                // {String} (CSS value) default is '0'
 25 |  *          bottom: '<number><units>'              // {String} (CSS value) default is '0'
 26 |  *      });
 27 |  *
 28 |  *  @author     Kevin Boucher
 29 |  *  @license    Dual licensed under MIT and GNU GPL
 30 |  */
 31 | ;(function($, window, document, undefined) {
 32 |     'use strict';
 33 | 
 34 |     // Defaults and constants
 35 |     var pluginName = 'stickyHeaderFooter',
 36 |         defaults = {
 37 |             bodySelector: 'tbody',
 38 |             footerSelector: 'tfoot',
 39 |             headerSelector: 'thead',
 40 |             top: '0',
 41 |             bottom: '0',
 42 |             zIndex: 10
 43 |         },
 44 |         classNames = {
 45 |             innerWrapper: 'sticky-header-footer_sticky-wrapper',
 46 |             innerWrapperHead: 'sticky-header-footer_sticky-header',
 47 |             innerWrapperFoot: 'sticky-header-footer_sticky-footer',
 48 |             outerWrapper: 'sticky-header-footer_wrapper',
 49 |             originalFooter: 'sticky-header-footer_original-footer',
 50 |             originalHeader: 'sticky-header-footer_original-header'
 51 |         },
 52 |         methods = {
 53 | 
 54 |             /**
 55 |                 Handle any required tear down.
 56 |                  - Remove scroll event handlers
 57 | 
 58 |                 @method tearDown
 59 |              */
 60 |             tearDown: function() {
 61 |                 var $this = $(this);
 62 |                 var $instance = $this.data()['plugin_' + pluginName];
 63 |                 var $element = $this;
 64 | 
 65 |                 if(!$instance) {
 66 |                     return;
 67 |                 }
 68 | 
 69 |                 window.removeEventListener('scroll', $instance._scrollHandler);
 70 |                 window.removeEventListener('resize', $instance._resizeHandlerHandler);
 71 |                 window.removeEventListener('orientationchange', $instance._orientationHandler);
 72 | 
 73 |                 /**
 74 |                  *  Fix for Chrome rendering bug (see above)
 75 |                  */
 76 |                 window.removeEventListener('scroll', $instance._scrollStopHandler);
 77 | 
 78 |                 /**
 79 |                     Remove added DOM elements and plugin data
 80 |                  */
 81 |                 $.each([$instance.footerElement, $instance.headerElement], function(idx, element) {
 82 |                     if (element) {
 83 |                         if (element.isStuck) {
 84 |                             $instance.unstick.call($instance, element);
 85 |                         }
 86 |                         $(element.stickyClone).remove();
 87 |                     }
 88 |                 });
 89 |                 $element.closest('.' + classNames.outerWrapper).before($element[0]).remove();
 90 |                 $element.removeData('plugin_' + pluginName);
 91 |             }
 92 |         },
 93 |         swapNodes = function(a, b) {
 94 |             var aParent = a.parentNode;
 95 |             var aSibling = a.nextSibling === b ? a : a.nextSibling;
 96 |             b.parentNode.insertBefore(a, b);
 97 |             aParent.insertBefore(b, aSibling);
 98 |         },
 99 |         throttle = function(fn, threshhold, scope) {
100 |             threshhold || (threshhold = 250);
101 | 
102 |             var last, deferTimer;
103 | 
104 |             return function() {
105 |                 var context = scope || this,
106 |                     now = +new Date(),
107 |                     args = arguments;
108 | 
109 |                 if (last && now < last + threshhold) {
110 |                     // hold on to it
111 |                     clearTimeout(deferTimer);
112 |                     deferTimer = setTimeout(function() {
113 |                         last = now;
114 |                         fn.apply(context, args);
115 |                     }, threshhold);
116 |                 } else {
117 |                     last = now;
118 |                     fn.apply(context, args);
119 |                 }
120 |             };
121 |         },
122 |         debounce = function(fn, delay) {
123 |             var timer = null;
124 | 
125 |             return function() {
126 |                 var context = this,
127 |                     args = arguments;
128 |                 clearTimeout(timer);
129 |                 timer = setTimeout(function() {
130 |                     fn.apply(context, args);
131 |                 }, delay);
132 |             };
133 |         };
134 | 
135 |     // StickyHeaderFooter constructor
136 |     function StickyHeaderFooter(element, options) {
137 |         this.element = element;
138 |         this.settings = $.extend({}, defaults, options);
139 | 
140 |         this.bodyElement = $(this.settings.bodySelector, this.element)[0];
141 |         this.footerElement = $(this.settings.footerSelector, this.element)[0];
142 |         this.headerElement = $(this.settings.headerSelector, this.element)[0];
143 | 
144 |         this.isTable = this.element.tagName.toLowerCase() === 'table';
145 |         this.isVisible = function() {
146 |             var elmRect = this.element.getBoundingClientRect();
147 |             return elmRect.top < window.innerHeight && elmRect.bottom > 0;
148 |         };
149 | 
150 |         this._defaults = defaults;
151 |         this._name = pluginName;
152 |         this._scrollHandler = null;
153 |         this._resizeHandler = null;
154 |         this._orientationHandler = null;
155 |         this._width = null;
156 | 
157 |         this.init();
158 |     }
159 | 
160 |     $.extend(StickyHeaderFooter.prototype, {
161 | 
162 |         /**
163 |          *  Initializes DOM and sets event listeners.
164 |          *
165 |          *  @method init
166 |          */
167 |         init: function() {
168 |             var throttleRate = 66;
169 | 
170 |             // Add DOM wrapper to provide known reference point
171 |             $(this.element).wrap('<div class="' + classNames.outerWrapper + '"></div>');
172 | 
173 |             if (this.footerElement || this.headerElement) {
174 | 
175 |                 // Clone, wrap, decorate and store references to header/footer.
176 |                 if (this.footerElement) {
177 |                     this.setupHeaderFooter(true);
178 |                     this.footerElement.isFooter = true;
179 |                 }
180 | 
181 |                 if (this.headerElement) {
182 |                     this.setupHeaderFooter();
183 |                 }
184 | 
185 |                 /**
186 |                  *   1. Store and add scroll event listener
187 |                  *      (Storing before assigning seems to uncover a Chrome repaint/redraw bug.)
188 |                  *   2. Trigger scroll event (initialize sticky header/footer positions)
189 |                  */
190 |                 document.addEventListener(
191 |                     'scroll',
192 |                     this._scrollHandler = throttle(this.watchHeaderFooter.bind(this), throttleRate)
193 |                 );
194 | 
195 |                 /**
196 |                  *  Fix for Chrome rendering bug (force repaint)
197 |                  *
198 |                  *  Sometimes in Chrome it is possible to have the sticky header still stuck to
199 |                  *  the top of the viewport even though the real header is well below it in the screen.
200 |                  *
201 |                  *  The obvious assumption is that there is an issue with the throttling that is causing
202 |                  *  that element not to be hidden when the real header scrolls back into view. However,
203 |                  *  inspecting the element will show that the CSS is in fact updated (has display:none).
204 |                  *
205 |                  *  The following code is a workaround for this Chrome issue and essentially forces a
206 |                  *  repaint when scrolling has stopped. (includes a line in tearDown())
207 |                  */
208 |                 document.addEventListener(
209 |                     'scroll',
210 |                     this._scrollStopHandler = debounce(function() {
211 |                         $('.'.concat(classNames.innerWrapper)).css('transform', 'translateZ(0)');
212 |                     }, throttleRate)
213 |                 );
214 | 
215 |                 /**
216 |                  *  Resizes sticky elements as needed on resize or orientation change.
217 |                  *
218 |                  */
219 |                 window.addEventListener(
220 |                     'resize',
221 |                     this._resizeHandler = throttle(this.watchParentWidth.bind(this), throttleRate)
222 |                 );
223 |                 window.addEventListener(
224 |                     'orientationchange',
225 |                     this._orientationHandler = this.watchParentWidth.bind(this)
226 |                 );
227 | 
228 |                 /**
229 |                  *  Trigger scroll event to initialize sticky header/footer positions.
230 |                  *
231 |                  *  - Wrapped in try block to overcome bug in IE
232 |                  */
233 |                 try {
234 |                     document.dispatchEvent(new Event('scroll'));
235 |                 } catch (e) {}
236 |             }
237 |         },
238 | 
239 |         /**
240 |          *  Decorates DOM elements to support sticky functionality.
241 |          *
242 |          *  @method setupHeaderFooter
243 |          *  @param {Boolean} Is this a sticky footer?
244 |          */
245 |         setupHeaderFooter: function(isFooter) {
246 |             var insertAction = isFooter ? 'insertAfter' : 'insertBefore',
247 |                 element = isFooter ? 'footerElement' : 'headerElement',
248 |                 colgroup = $(this.element).find('colgroup:first'),
249 |                 originalClassName = isFooter ?
250 |                     classNames.originalFooter :
251 |                     classNames.originalHeader,
252 |                 wrapperClasses = [
253 |                     classNames.innerWrapper,
254 |                     isFooter ? classNames.innerWrapperFoot : classNames.innerWrapperHead
255 |                 ];
256 | 
257 |             /**
258 |                 1. Create and store header/footer clone
259 |                 2. Wrap with sticky-header-footer DIV
260 |                 3. Conditionally wrap with TABLE (THEAD/TFOOT only)
261 |                 5. Hide clone
262 |                 6. Append to DOM
263 |              */
264 |             this[element].stickyClone = $(this[element]).clone(false)
265 |                 .wrap(
266 |                     $('<div></div>').css({
267 |                         bottom: isFooter ? this.settings.bottom : 'auto',
268 |                         position: 'fixed',
269 |                         top: !isFooter ? this.settings.top : 'auto',
270 |                         'z-index': this.settings.zIndex,
271 |                     }).addClass(wrapperClasses.join(' '))
272 |                 )
273 |                 .wrap(function() {
274 |                     var classNames = this.element.getAttribute('class');
275 |                     if (this.isTable) {
276 |                         return $('<table></table>').addClass(classNames);
277 |                     }
278 |                     return '';
279 |                 }.bind(this)).parents('.' + classNames.innerWrapper)
280 |                 .css('display', 'none')[insertAction](this.element)[0];
281 | 
282 |             /**
283 |                 Decorate original header and footer elements to
284 |                 differentiate them from clones at runtime.
285 |              */
286 |             $(this[element]).addClass(originalClassName);
287 | 
288 |             /**
289 |                 Support use of colgroup to maintain cell sizes on cloned and
290 |                 fixed header/footer elements.
291 | 
292 |                 * Valid with tables only
293 |              */
294 |             if (colgroup) {
295 |                 colgroup.clone(false).appendTo($(this[element].stickyClone).find('table'));
296 |             }
297 |         },
298 | 
299 |         /**
300 |          *  Swaps clone and source elements and displays clone container.
301 |          *  Also sets width to overcome deficiency when element is
302 |          *  instantiated in a non-visible state.
303 |          *  ("0px" width is applied in setupHeaderFooter().)
304 |          *
305 |          *  @method stick
306 |          *  @param {HTMLElement} The header or footer item to be stuck.
307 |          */
308 |         stick: function(elem) {
309 |             var settings = this.settings,
310 |                 selector = elem.isFooter ? settings.footerSelector : settings.headerSelector,
311 |                 width = $(elem).parents('.'.concat(classNames.outerWrapper + ':first')).width();
312 | 
313 |             swapNodes(
314 |                 elem,
315 |                 elem.stickyClone.querySelector(selector)
316 |             );
317 | 
318 |             // Store current width
319 |             this._width = width;
320 | 
321 |             // Set element state and sticky styles
322 |             elem.isStuck = true;
323 |             elem.stickyClone.style.display = 'block';
324 |             elem.stickyClone.style.width = width + 'px';
325 |         },
326 | 
327 |         /**
328 |          *  Swaps clone and source back to original location and hides clone container.
329 |          *
330 |          *  @method unstick
331 |          *  @param {HTMLElement} The header or footer item to be unstuck.
332 |          */
333 |         unstick: function(elem) {
334 |             var settings = this.settings,
335 |                 selector = elem.isFooter ? settings.footerSelector : settings.headerSelector;
336 | 
337 |             swapNodes(
338 |                 elem,
339 |                 this.element.querySelector(selector)
340 |             );
341 | 
342 |             elem.isStuck = false;
343 |             elem.stickyClone.style.display = 'none';
344 |         },
345 | 
346 |         /**
347 |          *  If sticky footer is enabled, this method will be called
348 |          *  on scroll to make any required updates to the footer.
349 |          *
350 |          *  @method watchFooter
351 |          *  @param {HTMLElement} The sticky footer item to be processed.
352 |          */
353 |         watchFooter: function(footer) {
354 |             var bodyRect = this.bodyElement.getBoundingClientRect(),
355 |                 footAdjust = parseInt(this.settings.bottom, 10),
356 |                 footRect = footer.getBoundingClientRect(),
357 |                 viewHeight = window.innerHeight;
358 | 
359 |             if (footer.isStuck) {
360 | 
361 |                 /**
362 |                     Unstick this sticky-header-footer's footer element if:
363 |                         1. Footer has moved above bottom of viewport, OR ...
364 |                         2. Header has scrolled to the footer, OR ...
365 |                         3. Sticky Header Footer element is no longer visible in the viewport
366 |                  */
367 |                 if (bodyRect.bottom < viewHeight - footAdjust - footRect.height ||
368 |                     bodyRect.top > viewHeight - footAdjust ||
369 |                     !this.isVisible()) {
370 |                     this.unstick.call(this, footer);
371 |                 }
372 |             } else {
373 | 
374 |                 /**
375 |                     Stick this sticky-header-footer's footer element if:
376 |                         1. Footer element is below bottom of the viewport, AND ...
377 |                         2. Header is above sticky footer, AND ...
378 |                         3. Sticky Header Footer element is visible in the viewport
379 |                  */
380 |                 if (bodyRect.bottom > viewHeight - footAdjust - footRect.height &&
381 |                     bodyRect.top < viewHeight - footAdjust &&
382 |                     this.isVisible()) {
383 |                     this.stick.call(this, footer);
384 |                 }
385 |             }
386 |         },
387 | 
388 |         /**
389 |          *  If sticky footer is enabled, this method will be called
390 |          *  on scroll to make any required updates to the footer.
391 |          *
392 |          *  @method watchHeader
393 |          *  @param {HTMLElement} The sticky header item to be processed.
394 |          */
395 |         watchHeader: function(header) {
396 |             var bodyRect = this.bodyElement.getBoundingClientRect(),
397 |                 headAdjust = parseInt(this.settings.top, 10),
398 |                 headRect = header.getBoundingClientRect();
399 | 
400 |             if (header.isStuck) {
401 | 
402 |                 /**
403 |                     Unstick this sticky-header-footer's header element if:
404 |                         1. Top of the header is below the top of the sticky header, OR ...
405 |                         2. Footer is under the sticky header
406 |                  */
407 |                 if (bodyRect.top > headAdjust + headRect.height ||
408 |                     bodyRect.bottom < headAdjust + headRect.height / 2) {
409 |                     this.unstick.call(this, header);
410 |                 }
411 |             } else {
412 | 
413 |                 /**
414 |                     Stick this sticky-header-footer's header element if:
415 |                         1. Top of the header is at the top of the viewport (or custom position), AND ...
416 |                         2. Footer is below the bottom of the potential sticky header
417 |                  */
418 |                 if (bodyRect.top <= headAdjust + headRect.height &&
419 |                     bodyRect.bottom > headAdjust + headRect.height) {
420 |                     this.stick.call(this, header);
421 |                 }
422 |             }
423 |         },
424 | 
425 |         /**
426 |          *  Delegates scroll event handling to specific header
427 |          *  and footer DOM manipulation methods.
428 |          *
429 |          *  @method watchHeaderFooter
430 |          */
431 |         watchHeaderFooter: function(/* event */) {
432 |             if (!!this.footerElement) {
433 |                 this.watchFooter(this.footerElement);
434 |             }
435 | 
436 |             if (!!this.headerElement) {
437 |                 this.watchHeader(this.headerElement);
438 |             }
439 |         },
440 | 
441 |         /**
442 |             Adjusts sticky elements' widths when container width changes.
443 | 
444 |             @method watchParentWidth
445 |          */
446 |         watchParentWidth: function(/* event */) {
447 |             var width = $(this.element)
448 |                     .parents('.' + classNames.outerWrapper + ':first')
449 |                     .width();
450 | 
451 |             if (this._width && this._width !== width) {
452 |                 if (!!this.footerElement) {
453 |                     this.footerElement.stickyClone.style.width = width + 'px';
454 |                 }
455 | 
456 |                 if (!!this.headerElement) {
457 |                     this.headerElement.stickyClone.style.width = width + 'px';
458 |                 }
459 |             }
460 |         },
461 | 
462 |         /**
463 |             Call `methods.tearDown()`
464 | 
465 |             Maintains backwards compatitibility after exposing
466 |             tearDown() as a method.
467 | 
468 |             @method tearDown
469 |          */
470 |         tearDown: function() {
471 |             methods.tearDown.call(this);
472 |         }
473 |     });
474 | 
475 |     /**
476 |         Lightweight wrapper around the constructor,
477 |         preventing multiple instantiations.
478 |     */
479 |     $.fn[pluginName] = function(methodOrOptions) {
480 |         if (methods[methodOrOptions]) {
481 |             return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
482 |         } else {
483 |             return this.each(function() {
484 |                 if (!$.data(this, 'plugin_' + pluginName)) {
485 |                     $.data(this, 'plugin_' + pluginName, new StickyHeaderFooter(this, methodOrOptions));
486 |                 }
487 |             });
488 |         }
489 |     };
490 | 
491 | })(jQuery, window, document);
492 | 


--------------------------------------------------------------------------------
/dist/jquery-sticky-header-footer.min.js:
--------------------------------------------------------------------------------
1 | /*
2 |  *  jquery-sticky-header-footer - v1.2.11
3 |  *  jQuery plugin that dynamically sticks content headers and footers to the top and bottom of viewport.
4 |  *  https://github.com/kboucher
5 |  *
6 |  *  Made by Kevin Boucher
7 |  *  Under MIT License
8 |  */
9 | !function(a,b,c){"use strict";function d(c,d){this.element=c,this.settings=a.extend({},f,d),this.bodyElement=a(this.settings.bodySelector,this.element)[0],this.footerElement=a(this.settings.footerSelector,this.element)[0],this.headerElement=a(this.settings.headerSelector,this.element)[0],this.isTable="table"===this.element.tagName.toLowerCase(),this.isVisible=function(){var a=this.element.getBoundingClientRect();return a.top<b.innerHeight&&a.bottom>0},this._defaults=f,this._name=e,this._scrollHandler=null,this._resizeHandler=null,this._orientationHandler=null,this._width=null,this.init()}var e="stickyHeaderFooter",f={bodySelector:"tbody",footerSelector:"tfoot",headerSelector:"thead",top:"0",bottom:"0",zIndex:10},g={innerWrapper:"sticky-header-footer_sticky-wrapper",innerWrapperHead:"sticky-header-footer_sticky-header",innerWrapperFoot:"sticky-header-footer_sticky-footer",outerWrapper:"sticky-header-footer_wrapper",originalFooter:"sticky-header-footer_original-footer",originalHeader:"sticky-header-footer_original-header"},h={tearDown:function(){var c=a(this),d=c.data()["plugin_"+e],f=c;d&&(b.removeEventListener("scroll",d._scrollHandler),b.removeEventListener("resize",d._resizeHandlerHandler),b.removeEventListener("orientationchange",d._orientationHandler),b.removeEventListener("scroll",d._scrollStopHandler),a.each([d.footerElement,d.headerElement],function(b,c){c&&(c.isStuck&&d.unstick.call(d,c),a(c.stickyClone).remove())}),f.closest("."+g.outerWrapper).before(f[0]).remove(),f.removeData("plugin_"+e))}},i=function(a,b){var c=a.parentNode,d=a.nextSibling===b?a:a.nextSibling;b.parentNode.insertBefore(a,b),c.insertBefore(b,d)},j=function(a,b,c){b||(b=250);var d,e;return function(){var f=c||this,g=+new Date,h=arguments;d&&d+b>g?(clearTimeout(e),e=setTimeout(function(){d=g,a.apply(f,h)},b)):(d=g,a.apply(f,h))}},k=function(a,b){var c=null;return function(){var d=this,e=arguments;clearTimeout(c),c=setTimeout(function(){a.apply(d,e)},b)}};a.extend(d.prototype,{init:function(){var d=66;if(a(this.element).wrap('<div class="'+g.outerWrapper+'"></div>'),this.footerElement||this.headerElement){this.footerElement&&(this.setupHeaderFooter(!0),this.footerElement.isFooter=!0),this.headerElement&&this.setupHeaderFooter(),c.addEventListener("scroll",this._scrollHandler=j(this.watchHeaderFooter.bind(this),d)),c.addEventListener("scroll",this._scrollStopHandler=k(function(){a(".".concat(g.innerWrapper)).css("transform","translateZ(0)")},d)),b.addEventListener("resize",this._resizeHandler=j(this.watchParentWidth.bind(this),d)),b.addEventListener("orientationchange",this._orientationHandler=this.watchParentWidth.bind(this));try{c.dispatchEvent(new Event("scroll"))}catch(e){}}},setupHeaderFooter:function(b){var c=b?"insertAfter":"insertBefore",d=b?"footerElement":"headerElement",e=a(this.element).find("colgroup:first"),f=b?g.originalFooter:g.originalHeader,h=[g.innerWrapper,b?g.innerWrapperFoot:g.innerWrapperHead];this[d].stickyClone=a(this[d]).clone(!1).wrap(a("<div></div>").css({bottom:b?this.settings.bottom:"auto",position:"fixed",top:b?"auto":this.settings.top,"z-index":this.settings.zIndex}).addClass(h.join(" "))).wrap(function(){var b=this.element.getAttribute("class");return this.isTable?a("<table></table>").addClass(b):""}.bind(this)).parents("."+g.innerWrapper).css("display","none")[c](this.element)[0],a(this[d]).addClass(f),e&&e.clone(!1).appendTo(a(this[d].stickyClone).find("table"))},stick:function(b){var c=this.settings,d=b.isFooter?c.footerSelector:c.headerSelector,e=a(b).parents(".".concat(g.outerWrapper+":first")).width();i(b,b.stickyClone.querySelector(d)),this._width=e,b.isStuck=!0,b.stickyClone.style.display="block",b.stickyClone.style.width=e+"px"},unstick:function(a){var b=this.settings,c=a.isFooter?b.footerSelector:b.headerSelector;i(a,this.element.querySelector(c)),a.isStuck=!1,a.stickyClone.style.display="none"},watchFooter:function(a){var c=this.bodyElement.getBoundingClientRect(),d=parseInt(this.settings.bottom,10),e=a.getBoundingClientRect(),f=b.innerHeight;a.isStuck?(c.bottom<f-d-e.height||c.top>f-d||!this.isVisible())&&this.unstick.call(this,a):c.bottom>f-d-e.height&&c.top<f-d&&this.isVisible()&&this.stick.call(this,a)},watchHeader:function(a){var b=this.bodyElement.getBoundingClientRect(),c=parseInt(this.settings.top,10),d=a.getBoundingClientRect();a.isStuck?(b.top>c+d.height||b.bottom<c+d.height/2)&&this.unstick.call(this,a):b.top<=c+d.height&&b.bottom>c+d.height&&this.stick.call(this,a)},watchHeaderFooter:function(){this.footerElement&&this.watchFooter(this.footerElement),this.headerElement&&this.watchHeader(this.headerElement)},watchParentWidth:function(){var b=a(this.element).parents("."+g.outerWrapper+":first").width();this._width&&this._width!==b&&(this.footerElement&&(this.footerElement.stickyClone.style.width=b+"px"),this.headerElement&&(this.headerElement.stickyClone.style.width=b+"px"))},tearDown:function(){h.tearDown.call(this)}}),a.fn[e]=function(b){return h[b]?h[b].apply(this,Array.prototype.slice.call(arguments,1)):this.each(function(){a.data(this,"plugin_"+e)||a.data(this,"plugin_"+e,new d(this,b))})}}(jQuery,window,document);


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-sticky-header-footer",
 3 |   "version": "1.2.11",
 4 |   "description": "jQuery plugin that dynamically sticks content headers and footers to the top and bottom of viewport.",
 5 |   "keywords": [
 6 |     "jquery-plugin",
 7 |     "jquery",
 8 |     "ui",
 9 |     "sticky"
10 |   ],
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/kboucher/jquery-sticky-header-footer.git"
14 |   },
15 |   "bugs": {
16 |     "url": "https://github.com/kboucher/jquery-sticky-header-footer/issues"
17 |   },
18 |   "author": {
19 |     "name": "Kevin Boucher",
20 |     "email": "kevin@kevinboucher.com",
21 |     "url": "https://github.com/kboucher"
22 |   },
23 |   "homepage": "https://github.com/kboucher",
24 |   "contributors": [
25 |     {
26 |       "name": "Kevin Boucher",
27 |       "email": "kevin@kevinboucher.com",
28 |       "url": "https://github.com/kboucher"
29 |     }
30 |   ],
31 |   "license": "MIT",
32 |   "devDependencies": {
33 |     "grunt": "~0.4.5",
34 |     "grunt-cli": "~0.1.13",
35 |     "grunt-contrib-concat": "^0.5.1",
36 |     "grunt-contrib-copy": "^0.8.0",
37 |     "grunt-contrib-jshint": "^0.11.0",
38 |     "grunt-contrib-uglify": "^0.8.0",
39 |     "grunt-contrib-watch": "^0.6.1",
40 |     "http-server": "^0.8.0"
41 |   },
42 |   "scripts": {
43 |     "test": "grunt travis --verbose",
44 |     "build": "grunt build",
45 |     "start": "http-server demo"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/jquery-sticky-header-footer.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *  jquery-sticky-header-footer
  3 |  *  Lightweight jQuery plugin providing sticky header and footer functionality for tables and lists.
  4 |  *
  5 |  *  @module     jquery-sticky-header-footer
  6 |  *  @extends    jQuery
  7 |  *
  8 |  *  @example
  9 |  *      // Configuration object is optional if setting up a table
 10 |  *      // with a sticky header and sticky footer.
 11 |  *      $(<your-list-container>).stickyHeaderFooter({
 12 |  *          // these are in the context of <your-list-container>
 13 |  *          bodySelector: '<body-selector>',       // {String} default is 'tbody'
 14 |  *          footerSelector: '<footer-selector>',   // {String} default is 'tfoot'
 15 |  *          headerSelector: '<header-selector>'    // {String} default is 'thead',
 16 |  *          top: '<number><units>',                // {String} (CSS value) default is '0'
 17 |  *          bottom: '<number><units>'              // {String} (CSS value) default is '0'
 18 |  *      });
 19 |  *
 20 |  *  @author     Kevin Boucher
 21 |  *  @license    Dual licensed under MIT and GNU GPL
 22 |  */
 23 | ;(function($, window, document, undefined) {
 24 |     'use strict';
 25 | 
 26 |     // Defaults and constants
 27 |     var pluginName = 'stickyHeaderFooter',
 28 |         defaults = {
 29 |             bodySelector: 'tbody',
 30 |             footerSelector: 'tfoot',
 31 |             headerSelector: 'thead',
 32 |             top: '0',
 33 |             bottom: '0',
 34 |             zIndex: 10
 35 |         },
 36 |         classNames = {
 37 |             innerWrapper: 'sticky-header-footer_sticky-wrapper',
 38 |             innerWrapperHead: 'sticky-header-footer_sticky-header',
 39 |             innerWrapperFoot: 'sticky-header-footer_sticky-footer',
 40 |             outerWrapper: 'sticky-header-footer_wrapper',
 41 |             originalFooter: 'sticky-header-footer_original-footer',
 42 |             originalHeader: 'sticky-header-footer_original-header'
 43 |         },
 44 |         methods = {
 45 | 
 46 |             /**
 47 |                 Handle any required tear down.
 48 |                  - Remove scroll event handlers
 49 | 
 50 |                 @method tearDown
 51 |              */
 52 |             tearDown: function() {
 53 |                 var $this = $(this);
 54 |                 var $instance = $this.data()['plugin_' + pluginName];
 55 |                 var $element = $this;
 56 | 
 57 |                 if(!$instance) {
 58 |                     return;
 59 |                 }
 60 | 
 61 |                 window.removeEventListener('scroll', $instance._scrollHandler);
 62 |                 window.removeEventListener('resize', $instance._resizeHandlerHandler);
 63 |                 window.removeEventListener('orientationchange', $instance._orientationHandler);
 64 | 
 65 |                 /**
 66 |                  *  Fix for Chrome rendering bug (see above)
 67 |                  */
 68 |                 window.removeEventListener('scroll', $instance._scrollStopHandler);
 69 | 
 70 |                 /**
 71 |                     Remove added DOM elements and plugin data
 72 |                  */
 73 |                 $.each([$instance.footerElement, $instance.headerElement], function(idx, element) {
 74 |                     if (element) {
 75 |                         if (element.isStuck) {
 76 |                             $instance.unstick.call($instance, element);
 77 |                         }
 78 |                         $(element.stickyClone).remove();
 79 |                     }
 80 |                 });
 81 |                 $element.closest('.' + classNames.outerWrapper).before($element[0]).remove();
 82 |                 $element.removeData('plugin_' + pluginName);
 83 |             }
 84 |         },
 85 |         swapNodes = function(a, b) {
 86 |             var aParent = a.parentNode;
 87 |             var aSibling = a.nextSibling === b ? a : a.nextSibling;
 88 |             b.parentNode.insertBefore(a, b);
 89 |             aParent.insertBefore(b, aSibling);
 90 |         },
 91 |         throttle = function(fn, threshhold, scope) {
 92 |             threshhold || (threshhold = 250);
 93 | 
 94 |             var last, deferTimer;
 95 | 
 96 |             return function() {
 97 |                 var context = scope || this,
 98 |                     now = +new Date(),
 99 |                     args = arguments;
100 | 
101 |                 if (last && now < last + threshhold) {
102 |                     // hold on to it
103 |                     clearTimeout(deferTimer);
104 |                     deferTimer = setTimeout(function() {
105 |                         last = now;
106 |                         fn.apply(context, args);
107 |                     }, threshhold);
108 |                 } else {
109 |                     last = now;
110 |                     fn.apply(context, args);
111 |                 }
112 |             };
113 |         },
114 |         debounce = function(fn, delay) {
115 |             var timer = null;
116 | 
117 |             return function() {
118 |                 var context = this,
119 |                     args = arguments;
120 |                 clearTimeout(timer);
121 |                 timer = setTimeout(function() {
122 |                     fn.apply(context, args);
123 |                 }, delay);
124 |             };
125 |         };
126 | 
127 |     // StickyHeaderFooter constructor
128 |     function StickyHeaderFooter(element, options) {
129 |         this.element = element;
130 |         this.settings = $.extend({}, defaults, options);
131 | 
132 |         this.bodyElement = $(this.settings.bodySelector, this.element)[0];
133 |         this.footerElement = $(this.settings.footerSelector, this.element)[0];
134 |         this.headerElement = $(this.settings.headerSelector, this.element)[0];
135 | 
136 |         this.isTable = this.element.tagName.toLowerCase() === 'table';
137 |         this.isVisible = function() {
138 |             var elmRect = this.element.getBoundingClientRect();
139 |             return elmRect.top < window.innerHeight && elmRect.bottom > 0;
140 |         };
141 | 
142 |         this._defaults = defaults;
143 |         this._name = pluginName;
144 |         this._scrollHandler = null;
145 |         this._resizeHandler = null;
146 |         this._orientationHandler = null;
147 |         this._width = null;
148 | 
149 |         this.init();
150 |     }
151 | 
152 |     $.extend(StickyHeaderFooter.prototype, {
153 | 
154 |         /**
155 |          *  Initializes DOM and sets event listeners.
156 |          *
157 |          *  @method init
158 |          */
159 |         init: function() {
160 |             var throttleRate = 66;
161 | 
162 |             // Add DOM wrapper to provide known reference point
163 |             $(this.element).wrap('<div class="' + classNames.outerWrapper + '"></div>');
164 | 
165 |             if (this.footerElement || this.headerElement) {
166 | 
167 |                 // Clone, wrap, decorate and store references to header/footer.
168 |                 if (this.footerElement) {
169 |                     this.setupHeaderFooter(true);
170 |                     this.footerElement.isFooter = true;
171 |                 }
172 | 
173 |                 if (this.headerElement) {
174 |                     this.setupHeaderFooter();
175 |                 }
176 | 
177 |                 /**
178 |                  *   1. Store and add scroll event listener
179 |                  *      (Storing before assigning seems to uncover a Chrome repaint/redraw bug.)
180 |                  *   2. Trigger scroll event (initialize sticky header/footer positions)
181 |                  */
182 |                 document.addEventListener(
183 |                     'scroll',
184 |                     this._scrollHandler = throttle(this.watchHeaderFooter.bind(this), throttleRate)
185 |                 );
186 | 
187 |                 /**
188 |                  *  Fix for Chrome rendering bug (force repaint)
189 |                  *
190 |                  *  Sometimes in Chrome it is possible to have the sticky header still stuck to
191 |                  *  the top of the viewport even though the real header is well below it in the screen.
192 |                  *
193 |                  *  The obvious assumption is that there is an issue with the throttling that is causing
194 |                  *  that element not to be hidden when the real header scrolls back into view. However,
195 |                  *  inspecting the element will show that the CSS is in fact updated (has display:none).
196 |                  *
197 |                  *  The following code is a workaround for this Chrome issue and essentially forces a
198 |                  *  repaint when scrolling has stopped. (includes a line in tearDown())
199 |                  */
200 |                 document.addEventListener(
201 |                     'scroll',
202 |                     this._scrollStopHandler = debounce(function() {
203 |                         $('.'.concat(classNames.innerWrapper)).css('transform', 'translateZ(0)');
204 |                     }, throttleRate)
205 |                 );
206 | 
207 |                 /**
208 |                  *  Resizes sticky elements as needed on resize or orientation change.
209 |                  *
210 |                  */
211 |                 window.addEventListener(
212 |                     'resize',
213 |                     this._resizeHandler = throttle(this.watchParentWidth.bind(this), throttleRate)
214 |                 );
215 |                 window.addEventListener(
216 |                     'orientationchange',
217 |                     this._orientationHandler = this.watchParentWidth.bind(this)
218 |                 );
219 | 
220 |                 /**
221 |                  *  Trigger scroll event to initialize sticky header/footer positions.
222 |                  *
223 |                  *  - Wrapped in try block to overcome bug in IE
224 |                  */
225 |                 try {
226 |                     document.dispatchEvent(new Event('scroll'));
227 |                 } catch (e) {}
228 |             }
229 |         },
230 | 
231 |         /**
232 |          *  Decorates DOM elements to support sticky functionality.
233 |          *
234 |          *  @method setupHeaderFooter
235 |          *  @param {Boolean} Is this a sticky footer?
236 |          */
237 |         setupHeaderFooter: function(isFooter) {
238 |             var insertAction = isFooter ? 'insertAfter' : 'insertBefore',
239 |                 element = isFooter ? 'footerElement' : 'headerElement',
240 |                 colgroup = $(this.element).find('colgroup:first'),
241 |                 originalClassName = isFooter ?
242 |                     classNames.originalFooter :
243 |                     classNames.originalHeader,
244 |                 wrapperClasses = [
245 |                     classNames.innerWrapper,
246 |                     isFooter ? classNames.innerWrapperFoot : classNames.innerWrapperHead
247 |                 ];
248 | 
249 |             /**
250 |                 1. Create and store header/footer clone
251 |                 2. Wrap with sticky-header-footer DIV
252 |                 3. Conditionally wrap with TABLE (THEAD/TFOOT only)
253 |                 5. Hide clone
254 |                 6. Append to DOM
255 |              */
256 |             this[element].stickyClone = $(this[element]).clone(false)
257 |                 .wrap(
258 |                     $('<div></div>').css({
259 |                         bottom: isFooter ? this.settings.bottom : 'auto',
260 |                         position: 'fixed',
261 |                         top: !isFooter ? this.settings.top : 'auto',
262 |                         'z-index': this.settings.zIndex,
263 |                     }).addClass(wrapperClasses.join(' '))
264 |                 )
265 |                 .wrap(function() {
266 |                     var classNames = this.element.getAttribute('class');
267 |                     if (this.isTable) {
268 |                         return $('<table></table>').addClass(classNames);
269 |                     }
270 |                     return '';
271 |                 }.bind(this)).parents('.' + classNames.innerWrapper)
272 |                 .css('display', 'none')[insertAction](this.element)[0];
273 | 
274 |             /**
275 |                 Decorate original header and footer elements to
276 |                 differentiate them from clones at runtime.
277 |              */
278 |             $(this[element]).addClass(originalClassName);
279 | 
280 |             /**
281 |                 Support use of colgroup to maintain cell sizes on cloned and
282 |                 fixed header/footer elements.
283 | 
284 |                 * Valid with tables only
285 |              */
286 |             if (colgroup) {
287 |                 colgroup.clone(false).appendTo($(this[element].stickyClone).find('table'));
288 |             }
289 |         },
290 | 
291 |         /**
292 |          *  Swaps clone and source elements and displays clone container.
293 |          *  Also sets width to overcome deficiency when element is
294 |          *  instantiated in a non-visible state.
295 |          *  ("0px" width is applied in setupHeaderFooter().)
296 |          *
297 |          *  @method stick
298 |          *  @param {HTMLElement} The header or footer item to be stuck.
299 |          */
300 |         stick: function(elem) {
301 |             var settings = this.settings,
302 |                 selector = elem.isFooter ? settings.footerSelector : settings.headerSelector,
303 |                 width = $(elem).parents('.'.concat(classNames.outerWrapper + ':first')).width();
304 | 
305 |             swapNodes(
306 |                 elem,
307 |                 elem.stickyClone.querySelector(selector)
308 |             );
309 | 
310 |             // Store current width
311 |             this._width = width;
312 | 
313 |             // Set element state and sticky styles
314 |             elem.isStuck = true;
315 |             elem.stickyClone.style.display = 'block';
316 |             elem.stickyClone.style.width = width + 'px';
317 |         },
318 | 
319 |         /**
320 |          *  Swaps clone and source back to original location and hides clone container.
321 |          *
322 |          *  @method unstick
323 |          *  @param {HTMLElement} The header or footer item to be unstuck.
324 |          */
325 |         unstick: function(elem) {
326 |             var settings = this.settings,
327 |                 selector = elem.isFooter ? settings.footerSelector : settings.headerSelector;
328 | 
329 |             swapNodes(
330 |                 elem,
331 |                 this.element.querySelector(selector)
332 |             );
333 | 
334 |             elem.isStuck = false;
335 |             elem.stickyClone.style.display = 'none';
336 |         },
337 | 
338 |         /**
339 |          *  If sticky footer is enabled, this method will be called
340 |          *  on scroll to make any required updates to the footer.
341 |          *
342 |          *  @method watchFooter
343 |          *  @param {HTMLElement} The sticky footer item to be processed.
344 |          */
345 |         watchFooter: function(footer) {
346 |             var bodyRect = this.bodyElement.getBoundingClientRect(),
347 |                 footAdjust = parseInt(this.settings.bottom, 10),
348 |                 footRect = footer.getBoundingClientRect(),
349 |                 viewHeight = window.innerHeight;
350 | 
351 |             if (footer.isStuck) {
352 | 
353 |                 /**
354 |                     Unstick this sticky-header-footer's footer element if:
355 |                         1. Footer has moved above bottom of viewport, OR ...
356 |                         2. Header has scrolled to the footer, OR ...
357 |                         3. Sticky Header Footer element is no longer visible in the viewport
358 |                  */
359 |                 if (bodyRect.bottom < viewHeight - footAdjust - footRect.height ||
360 |                     bodyRect.top > viewHeight - footAdjust ||
361 |                     !this.isVisible()) {
362 |                     this.unstick.call(this, footer);
363 |                 }
364 |             } else {
365 | 
366 |                 /**
367 |                     Stick this sticky-header-footer's footer element if:
368 |                         1. Footer element is below bottom of the viewport, AND ...
369 |                         2. Header is above sticky footer, AND ...
370 |                         3. Sticky Header Footer element is visible in the viewport
371 |                  */
372 |                 if (bodyRect.bottom > viewHeight - footAdjust - footRect.height &&
373 |                     bodyRect.top < viewHeight - footAdjust &&
374 |                     this.isVisible()) {
375 |                     this.stick.call(this, footer);
376 |                 }
377 |             }
378 |         },
379 | 
380 |         /**
381 |          *  If sticky footer is enabled, this method will be called
382 |          *  on scroll to make any required updates to the footer.
383 |          *
384 |          *  @method watchHeader
385 |          *  @param {HTMLElement} The sticky header item to be processed.
386 |          */
387 |         watchHeader: function(header) {
388 |             var bodyRect = this.bodyElement.getBoundingClientRect(),
389 |                 headAdjust = parseInt(this.settings.top, 10),
390 |                 headRect = header.getBoundingClientRect();
391 | 
392 |             if (header.isStuck) {
393 | 
394 |                 /**
395 |                     Unstick this sticky-header-footer's header element if:
396 |                         1. Top of the header is below the top of the sticky header, OR ...
397 |                         2. Footer is under the sticky header
398 |                  */
399 |                 if (bodyRect.top > headAdjust + headRect.height ||
400 |                     bodyRect.bottom < headAdjust + headRect.height / 2) {
401 |                     this.unstick.call(this, header);
402 |                 }
403 |             } else {
404 | 
405 |                 /**
406 |                     Stick this sticky-header-footer's header element if:
407 |                         1. Top of the header is at the top of the viewport (or custom position), AND ...
408 |                         2. Footer is below the bottom of the potential sticky header
409 |                  */
410 |                 if (bodyRect.top <= headAdjust + headRect.height &&
411 |                     bodyRect.bottom > headAdjust + headRect.height) {
412 |                     this.stick.call(this, header);
413 |                 }
414 |             }
415 |         },
416 | 
417 |         /**
418 |          *  Delegates scroll event handling to specific header
419 |          *  and footer DOM manipulation methods.
420 |          *
421 |          *  @method watchHeaderFooter
422 |          */
423 |         watchHeaderFooter: function(/* event */) {
424 |             if (!!this.footerElement) {
425 |                 this.watchFooter(this.footerElement);
426 |             }
427 | 
428 |             if (!!this.headerElement) {
429 |                 this.watchHeader(this.headerElement);
430 |             }
431 |         },
432 | 
433 |         /**
434 |             Adjusts sticky elements' widths when container width changes.
435 | 
436 |             @method watchParentWidth
437 |          */
438 |         watchParentWidth: function(/* event */) {
439 |             var width = $(this.element)
440 |                     .parents('.' + classNames.outerWrapper + ':first')
441 |                     .width();
442 | 
443 |             if (this._width && this._width !== width) {
444 |                 if (!!this.footerElement) {
445 |                     this.footerElement.stickyClone.style.width = width + 'px';
446 |                 }
447 | 
448 |                 if (!!this.headerElement) {
449 |                     this.headerElement.stickyClone.style.width = width + 'px';
450 |                 }
451 |             }
452 |         },
453 | 
454 |         /**
455 |             Call `methods.tearDown()`
456 | 
457 |             Maintains backwards compatitibility after exposing
458 |             tearDown() as a method.
459 | 
460 |             @method tearDown
461 |          */
462 |         tearDown: function() {
463 |             methods.tearDown.call(this);
464 |         }
465 |     });
466 | 
467 |     /**
468 |         Lightweight wrapper around the constructor,
469 |         preventing multiple instantiations.
470 |     */
471 |     $.fn[pluginName] = function(methodOrOptions) {
472 |         if (methods[methodOrOptions]) {
473 |             return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
474 |         } else {
475 |             return this.each(function() {
476 |                 if (!$.data(this, 'plugin_' + pluginName)) {
477 |                     $.data(this, 'plugin_' + pluginName, new StickyHeaderFooter(this, methodOrOptions));
478 |                 }
479 |             });
480 |         }
481 |     };
482 | 
483 | })(jQuery, window, document);
484 | 


--------------------------------------------------------------------------------