2017-12-13 4 views
6

Ich habe ein Szenario, in dem ich Tabellenfußzeilen jeder Tag am unteren Rand der Scroll-Div verschieben muss. Hier ist die plnkr.Move Tabellenfuß nach unten scrollen dynamisch div mit jquery

Ich kann es durch

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

aber ich will 260 berechnen und es tun. Brauche Hilfe.

+0

berechnen zu welchem ​​Zweck? Meinst du damit die Entfernung berechnen, die benötigt wird, um nach unten zu gehen, abhängig davon, wie viele Reihen es gibt? – zer00ne

+0

Anstatt den Abstand von oben zu definieren, haben Sie den Abstand von unten mit '.css ('bottom', 0) versucht;'? – Adriano

+0

Keine Notwendigkeit, jQuery zu verwenden, um dies zu lösen. Ein paar einfache CSS-Zeilen sind alles, was benötigt wird. Ich habe eine Lösung zur Verfügung gestellt, die diese Methode zeigt. –

Antwort

5

Sie müssen die untere Position des gesamten Containers berechnen und die Höhe des Fußzeilenkopfs und der horizontalen Bildlaufleiste davon subtrahieren. Es wird Ihnen die oberste Position der Fußzeile th Elemente erhalten.

$('.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 

Erstellt die aktualisierte plunker.

+0

Danke. Mit diesem Code erreiche ich mein Ziel, feste Kopfzeilen, Spalten und Fußzeilen zu erstellen. –

2

Dies kann mit ein paar einfachen CSS-Zeilen erreicht werden. Dies macht komplexe Berechnungen aufgrund von Höhen und Positionen in jQuery überflüssig und bietet den zusätzlichen Vorteil, dass Sie bei Bedarf reagieren können.

Ziel ist es, das tfoot Element am unteren Rand des Elements .sticky-table absolut zu positionieren.

Um dies zu tun, können wir die .sticky-table eine position: relative; geben, und die tfoot eine position: absolute; bottom: 0;.

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

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

So:

/* 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>

Verwandte Themen