@@include("@@autopath/partials/docs/docs-sidebar.html", { "link": "table-sticky-header.html" })

Sticky Header

Make a table thead sticky to the top of a page, card or any other content.

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

        
          <link rel="stylesheet" href="./assets/vendor/hs-table-sticky-header/src/hs.table-sticky-header.css">

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

        
          <script src="./assets/vendor/hs-table-sticky-header/src/hs.table-sticky-header.js"></script>

          <script>
            $(document).on('ready', function () {
              // INITIALIZATION OF STICKY HEADER
              // =======================================================
              new HSTableStickyHeader('.js-sticky-header', {
                offsetTop: "60px"
              }).init();
            })();
          </script>

Example

Methods

Parameters Description Default value

offsetTop

 Add custom offset from top in px 0