Sticky Tab Navigation For Bootstrap Tabs - jQuery tabFrozenScroll

The bootstrapTabFrozenScroll jQuery plugin helps create 'sticky' Bootstrap tabs component that makes the tab navigation always be on the top of the webpage as you scroll down the long tab panels.

How to use it:

1. Include the needed jQuery library and Bootstrap framework on the web page.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2. Include the jQuery tabFrozenScroll plugin's files on the web page.

<link href="tabFrozenScroll.css" rel="stylesheet">
<script src="tabFrozenScroll.js"></script>

3. Assume that you have large tables inside the Bootstrap tables as follows:

<div class="nav-tabs-horizontal">
  <ul class="nav nav-tabs" data-plugin="nav-tabs" role="tablist">
      <li class="active" 
          role="presentation">
          <a id="tab0"
             data-toggle="tab" 
             href="#exampleTabsOne" 
             aria-controls="exampleTabsOne" 
             role="tab">TAB 0 - master
          </a>
      </li>
      <li role="presentation">
          <a id="tab1"
             data-parent="tab0"
             data-toggle="tab" 
             href="#exampleTabsTwo" 
             aria-controls="exampleTabsTwo" 
             role="tab">TAB 1 - detail of TAB
      </a></li>                    
  </ul>
  <div class="tab-content padding-top-20">
      <div class="tab-pane active" id="exampleTabsOne" role="tabpanel">
          <table id="mainTable" class="table table-bordered table-hover dataTable table-striped width-full dtr-inline">
              <thead class="">
                  <tr>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                  </tr><tr>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                  </tr>
                  <tr>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                  </tr>
                  <tr>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                      <td> column </td>
                  </tr>
                  ...
              </tbody>
          </table>
      </div>
      <div class="tab-pane" id="exampleTabsTwo" role="tabpanel">
          Tab 2
    </div>
  </div>
</div>

4. Initialize the plugin and done.

// tabFrozenScroll(mainTable, tabElement, minScrollHeight)
tabFrozenScroll("#mainTable", ".nav.nav-tabs", 0);

Change log:

2017-11-08

• Fixed problem when exists multi-dependency between TABs

---

This awesome jQuery plugin is developed by LeandroFranciscato. For more Advanced Usages, please check the demo page or visit the official website.