jquery - Datatables with FixedHeader extension, offsetTop option creates 2 headers -
i'm using datatables fixedheader extension. i'm using offsettop option fixed header, useful making header stop below navigation menu @ top.
when scroll page, header row stops supposed stop (130px top of page), scrolling can briefly see 2 headers, 1 sticking in place, , original one.
is there can header doesn't show twice? clear, on development server don't have link post.
there indeed double header appears unless positioning correctly.
i highlight important parts of solution.
css:
added overflow:auto because .navbar has 20px bottom margin , make #nav-wrapper correct size measure later.
javascript:
the trick here adjust <body> top padding compensate fixed header. code $(this).height() measures height of #nav-wrapper, why setting overflow:auto important in css.
also later need measure offsettop correctly fixedheader extension. trick here we're measuring height of navigation bar without 20px bottom margin $('#nav-wrapper .navbar').height().
$(document).ready(function() { $('body').css('padding-top', $('#nav-wrapper').height()); var table = $('#example').datatable(); new $.fn.datatable.fixedheader( table, { "offsettop": $('#nav-wrapper .navbar').height() }); }); demo:
$(document).ready(function() { $('body').css('padding-top', $('#nav-wrapper').height()); var table = $('#example').datatable(); new $.fn.datatable.fixedheader( table, { "offsettop": $('#nav-wrapper .navbar').height() }); });#nav-wrapper { position: fixed; top: 0; width: 100%; z-index:99; overflow:auto; }<link href="http://datatables.net/release-datatables/media/css/jquery.datatables.css" rel="stylesheet"/> <link href="http://datatables.net/release-datatables/extensions/fixedheader/css/datatables.fixedheader.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://datatables.net/release-datatables/media/js/jquery.datatables.js"></script> <script src="http://datatables.net/release-datatables/extensions/fixedheader/js/datatables.fixedheader.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div id="nav-wrapper"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div><!-- /.navbar-collapse --> </div> </nav> </div> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>name</th> <th>position</th> <th>office</th> <th>age</th> <th>start date</th> <th>salary</th> </tr> </thead> <tfoot> <tr> <th>name</th> <th>position</th> <th>office</th> <th>age</th> <th>start date</th> <th>salary</th> </tr> </tfoot> <tbody> <tr> <td>tiger nixon</td> <td>system architect</td> <td>edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>garrett winters</td> <td>accountant</td> <td>tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>ashton cox</td> <td>junior technical author</td> <td>san francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>cedric kelly</td> <td>senior javascript developer</td> <td>edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>airi satou</td> <td>accountant</td> <td>tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>brielle williamson</td> <td>integration specialist</td> <td>new york</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>herrod chandler</td> <td>sales assistant</td> <td>san francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>rhona davidson</td> <td>integration specialist</td> <td>tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>colleen hurst</td> <td>javascript developer</td> <td>san francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>sonya frost</td> <td>software engineer</td> <td>edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> <tr> <td>jena gaines</td> <td>office manager</td> <td>london</td> <td>30</td> <td>2008/12/19</td> <td>$90,560</td> </tr> <tr> <td>quinn flynn</td> <td>support lead</td> <td>edinburgh</td> <td>22</td> <td>2013/03/03</td> <td>$342,000</td> </tr> <tr> <td>charde marshall</td> <td>regional director</td> <td>san francisco</td> <td>36</td> <td>2008/10/16</td> <td>$470,600</td> </tr> <tr> <td>haley kennedy</td> <td>senior marketing designer</td> <td>london</td> <td>43</td> <td>2012/12/18</td> <td>$313,500</td> </tr> <tr> <td>tatyana fitzpatrick</td> <td>regional director</td> <td>london</td> <td>19</td> <td>2010/03/17</td> <td>$385,750</td> </tr> <tr> <td>michael silva</td> <td>marketing designer</td> <td>london</td> <td>66</td> <td>2012/11/27</td> <td>$198,500</td> </tr> <tr> <td>paul byrd</td> <td>chief financial officer (cfo)</td> <td>new york</td> <td>64</td> <td>2010/06/09</td> <td>$725,000</td> </tr> <tr> <td>gloria little</td> <td>systems administrator</td> <td>new york</td> <td>59</td> <td>2009/04/10</td> <td>$237,500</td> </tr> <tr> <td>bradley greer</td> <td>software engineer</td> <td>london</td> <td>41</td> <td>2012/10/13</td> <td>$132,000</td> </tr> <tr> <td>dai rios</td> <td>personnel lead</td> <td>edinburgh</td> <td>35</td> <td>2012/09/26</td> <td>$217,500</td> </tr> <tr> <td>jenette caldwell</td> <td>development lead</td> <td>new york</td> <td>30</td> <td>2011/09/03</td> <td>$345,000</td> </tr> <tr> <td>yuri berry</td> <td>chief marketing officer (cmo)</td> <td>new york</td> <td>40</td> <td>2009/06/25</td> <td>$675,000</td> </tr> <tr> <td>caesar vance</td> <td>pre-sales support</td> <td>new york</td> <td>21</td> <td>2011/12/12</td> <td>$106,450</td> </tr> <tr> <td>doris wilder</td> <td>sales assistant</td> <td>sidney</td> <td>23</td> <td>2010/09/20</td> <td>$85,600</td> </tr> <tr> <td>angelica ramos</td> <td>chief executive officer (ceo)</td> <td>london</td> <td>47</td> <td>2009/10/09</td> <td>$1,200,000</td> </tr> <tr> <td>gavin joyce</td> <td>developer</td> <td>edinburgh</td> <td>42</td> <td>2010/12/22</td> <td>$92,575</td> </tr> <tr> <td>jennifer chang</td> <td>regional director</td> <td>singapore</td> <td>28</td> <td>2010/11/14</td> <td>$357,650</td> </tr> <tr> <td>brenden wagner</td> <td>software engineer</td> <td>san francisco</td> <td>28</td> <td>2011/06/07</td> <td>$206,850</td> </tr> <tr> <td>fiona green</td> <td>chief operating officer (coo)</td> <td>san francisco</td> <td>48</td> <td>2010/03/11</td> <td>$850,000</td> </tr> <tr> <td>shou itou</td> <td>regional marketing</td> <td>tokyo</td> <td>20</td> <td>2011/08/14</td> <td>$163,000</td> </tr> <tr> <td>michelle house</td> <td>integration specialist</td> <td>sidney</td> <td>37</td> <td>2011/06/02</td> <td>$95,400</td> </tr> <tr> <td>suki burks</td> <td>developer</td> <td>london</td> <td>53</td> <td>2009/10/22</td> <td>$114,500</td> </tr> <tr> <td>prescott bartlett</td> <td>technical author</td> <td>london</td> <td>27</td> <td>2011/05/07</td> <td>$145,000</td> </tr> <tr> <td>gavin cortez</td> <td>team leader</td> <td>san francisco</td> <td>22</td> <td>2008/10/26</td> <td>$235,500</td> </tr> <tr> <td>martena mccray</td> <td>post-sales support</td> <td>edinburgh</td> <td>46</td> <td>2011/03/09</td> <td>$324,050</td> </tr> <tr> <td>unity butler</td> <td>marketing designer</td> <td>san francisco</td> <td>47</td> <td>2009/12/09</td> <td>$85,675</td> </tr> <tr> <td>howard hatfield</td> <td>office manager</td> <td>san francisco</td> <td>51</td> <td>2008/12/16</td> <td>$164,500</td> </tr> <tr> <td>hope fuentes</td> <td>secretary</td> <td>san francisco</td> <td>41</td> <td>2010/02/12</td> <td>$109,850</td> </tr> <tr> <td>vivian harrell</td> <td>financial controller</td> <td>san francisco</td> <td>62</td> <td>2009/02/14</td> <td>$452,500</td> </tr> <tr> <td>timothy mooney</td> <td>office manager</td> <td>london</td> <td>37</td> <td>2008/12/11</td> <td>$136,200</td> </tr> <tr> <td>jackson bradshaw</td> <td>director</td> <td>new york</td> <td>65</td> <td>2008/09/26</td> <td>$645,750</td> </tr> <tr> <td>olivia liang</td> <td>support engineer</td> <td>singapore</td> <td>64</td> <td>2011/02/03</td> <td>$234,500</td> </tr> <tr> <td>bruno nash</td> <td>software engineer</td> <td>london</td> <td>38</td> <td>2011/05/03</td> <td>$163,500</td> </tr> <tr> <td>sakura yamamoto</td> <td>support engineer</td> <td>tokyo</td> <td>37</td> <td>2009/08/19</td> <td>$139,575</td> </tr> <tr> <td>thor walton</td> <td>developer</td> <td>new york</td> <td>61</td> <td>2013/08/11</td> <td>$98,540</td> </tr> <tr> <td>finn camacho</td> <td>support engineer</td> <td>san francisco</td> <td>47</td> <td>2009/07/07</td> <td>$87,500</td> </tr> <tr> <td>serge baldwin</td> <td>data coordinator</td> <td>singapore</td> <td>64</td> <td>2012/04/09</td> <td>$138,575</td> </tr> <tr> <td>zenaida frank</td> <td>software engineer</td> <td>new york</td> <td>63</td> <td>2010/01/04</td> <td>$125,250</td> </tr> <tr> <td>zorita serrano</td> <td>software engineer</td> <td>san francisco</td> <td>56</td> <td>2012/06/01</td> <td>$115,000</td> </tr> <tr> <td>jennifer acosta</td> <td>junior javascript developer</td> <td>edinburgh</td> <td>43</td> <td>2013/02/01</td> <td>$75,650</td> </tr> <tr> <td>cara stevens</td> <td>sales assistant</td> <td>new york</td> <td>46</td> <td>2011/12/06</td> <td>$145,600</td> </tr> <tr> <td>hermione butler</td> <td>regional director</td> <td>london</td> <td>47</td> <td>2011/03/21</td> <td>$356,250</td> </tr> <tr> <td>lael greer</td> <td>systems administrator</td> <td>london</td> <td>21</td> <td>2009/02/27</td> <td>$103,500</td> </tr> <tr> <td>jonas alexander</td> <td>developer</td> <td>san francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</td> </tr> <tr> <td>shad decker</td> <td>regional director</td> <td>edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$183,000</td> </tr> <tr> <td>michael bruce</td> <td>javascript developer</td> <td>singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> </tr> <tr> <td>donna snider</td> <td>customer support</td> <td>new york</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> </table>
Comments
Post a Comment