Geek Answers Handbook

Move table footer down dynamically by scrolling div with jquery

I have a scenario in which I need to move the table footer to each tag at the bottom of the scroll scroll div. Here is plnkr .

I can move it to hardcoded with

$('.sticky-table').find("table tfoot tr.sticky-row th").css('top', 260);

but I want to calculate 260 and do it. Need help.

+6
source share
2 answers

You need to calculate the bottom position of the entire container and subtract the height of the footer header and horizontal scrollbar. He will select the top position of the footer elements th.

$('.sticky-table.sticky-headers').offset().top //top of the container
+ $('.sticky-table.sticky-headers').outerHeight() //height of the container (adding it with top gives you the bottom position of the container)
- $('.sticky-table').find("table tfoot tr.sticky-row th").outerHeight(true) //height of the footer headers
- 11 //Fixed height of the scrollbar

plunker.

+5

CSS. , ​​ jQuery, .

, tfoot .sticky-table.

.sticky-table a position: relative; tfoot a position: absolute; bottom: 0;.

.sticky-table {
  /* ...existing styles */
  position: relative;
}

.sticky-table tfoot {
  position: absolute;
  bottom: 0;
}

:

/* Styles go here */

.sticky-table {
  position: relative;
  max-width: 100%;
  max-height: 500px;
  height: 500px;
  overflow: auto;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 0 !important;
}

.sticky-table table {
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  border-spacing: 0;
}

.sticky-table table tr.sticky-row th,
.sticky-table table tr.sticky-row td {
  background-color: #fff;
  border-top: 0;
  position: relative;
  outline: 1px solid #ddd;
  z-index: 5;
}

.sticky-table table td.sticky-cell,
.sticky-table table th.sticky-cell {
  background-color: #fff;
  outline: 1px solid #ddd;
  position: relative;
  z-index: 10;
}

.sticky-table table tr.sticky-row td.sticky-cell,
.sticky-table table tr.sticky-row th.sticky-cell {
  z-index: 15;
}

.sticky-table tfoot {
  position: absolute;
  bottom: 0;
}

.sticky-table::-webkit-scrollbar {
  width: 0.7em;
  height: 0.7em;
}

.sticky-table::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.sticky-table::-webkit-scrollbar-thumb {
  background-color: #b37e7e;
  outline: 1px solid slategrey;
  border-radius: 5px;
}
<div class="row">
  <div class="col-md-12">
    <div class="sticky-table sticky-headers">
      <table class="table table-striped table-striped">
        <thead>
          <tr class="sticky-row">
            <th>Campaign Name</th>
            <th>Ad Sets</th>
            <th>Ads</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>

          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="sticky-cell">Demo Campaign</td>
            <td class="sticky-cell">100</td>
            <td class="sticky-cell">200</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
          </tr>
          <tr>
            <td class="sticky-cell">Demo Campaign</td>
            <td class="sticky-cell">100</td>
            <td class="sticky-cell">200</td>
            <td>Blue</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>
            <td>2000</td>
            <td>Ford</td>
            <td>Escort</td>
            <td>Blue</td>
            <td>2000</td>

          </tr>
        </tbody>
        <tfoot>
          <tr class="sticky-row">
            <th class="sticky-cell">Demo Campaign</th>
            <th class="sticky-cell">100</th>
            <th class="sticky-cell">200</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>
            <th>2000</th>
            <th>Ford</th>
            <th>Escort</th>
            <th>Blue</th>
            <th>2000</th>

          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>
+2

More articles:


All Articles