De-animate Sticky Header

2

正如@Miah說，CSS過渡性質應該被刪除。我強迫它沒有。

.sticky-wrap .sticky-thead, 
.sticky-wrap .sticky-col, 
.sticky-wrap .sticky-intersect { 
    transition: none !important; 
}

而且在jquery.stickyheader.js，scroll被稱爲具有15ms的油門。

對於左側立柱

$t.parent('.sticky-wrap').scroll($.throttle(15, function() {

變化......

$t.parent('.sticky-wrap').scroll($.throttle(0, function() {

對於頭球頂

.scroll($.throttle(15, repositionStickyHead));

變化...

.scroll($.throttle(0, repositionStickyHead));

...

完整片段

.sticky-wrap .sticky-thead, 
 
.sticky-wrap .sticky-col, 
 
.sticky-wrap .sticky-intersect { 
 
    transition: none !important; 
 
}

<link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/StickyTableHeaders/css/normalize.css" /> 
 
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/StickyTableHeaders/css/demo.css" /> 
 
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/StickyTableHeaders/css/component.css" /> 
 

 
<div class="component"> 
 
    <table class=""> 
 
     <thead> 
 
      <tr> 
 
       <th>Population</th> 
 
       <th>Alpha</th> 
 
       <th>Beta</th> 
 
       <th>Gamma</th> 
 
       <th>Delta</th> 
 
       <th>Epsilon</th> 
 
       <th>Zeta</th> 
 
       <th>Eta</th> 
 
       <th>Theta</th> 
 
       <th>Iota</th> 
 
       <th>Kappa</th> 
 
       <th>Lambda</th> 
 
       <th>Mu</th> 
 
       <th>Nu</th> 
 
       <th>Xi</th> 
 
       <th>Omicron</th> 
 
       <th>Pi</th> 
 
       <th>Rho</th> 
 
       <th>Sigma</th> 
 
       <th>Tau</th> 
 
       <th>Upsilon</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <th>Sample #1</th> 
 
       <td>23</td> 
 
       <td>88</td> 
 
       <td>8</td> 
 
       <td>2</td> 
 
       <td>67</td> 
 
       <td>83</td> 
 
       <td>81</td> 
 
       <td>37</td> 
 
       <td>91</td> 
 
       <td>96</td> 
 
       <td>13</td> 
 
       <td>3</td> 
 
       <td>95</td> 
 
       <td>98</td> 
 
       <td>10</td> 
 
       <td>87</td> 
 
       <td>70</td> 
 
       <td>54</td> 
 
       <td>72</td> 
 
       <td>75</td> 
 
      </tr> 
 
      <tr> 
 
       <th>Sample #2</th> 
 
       <td>14</td> 
 
       <td>21</td> 
 
       <td>20</td> 
 
       <td>21</td> 
 
       <td>9</td> 
 
       <td>68</td> 
 
       <td>60</td> 
 
       <td>73</td> 
 
       <td>22</td> 
 
       <td>29</td> 
 
       <td>9</td> 
 
       <td>49</td> 
 
       <td>49</td> 
 
       <td>66</td> 
 
       <td>58</td> 
 
       <td>10</td> 
 
       <td>8</td> 
 
       <td>24</td> 
 
       <td>19</td> 
 
       <td>65</td> 
 
      </tr> 
 
      <tr> 
 
       <th>Sample #3</th> 
 
       <td>4</td> 
 
       <td>50</td> 
 
       <td>89</td> 
 
       <td>72</td> 
 
       <td>99</td> 
 
       <td>90</td> 
 
       <td>24</td> 
 
       <td>86</td> 
 
       <td>95</td> 
 
       <td>44</td> 
 
       <td>32</td> 
 
       <td>97</td> 
 
       <td>18</td> 
 
       <td>90</td> 
 
       <td>81</td> 
 
       <td>9</td> 
 
       <td>38</td> 
 
       <td>4</td> 
 
       <td>85</td> 
 
       <td>15</td> 
 
      </tr> 
 
      <tr> 
 
       <th>Sample #4</th> 
 
       <td>10</td> 
 
       <td class="err">Parse error</td> 
 
       <td>32</td> 
 
       <td>45</td> 
 
       <td>53</td> 
 
       <td>29</td> 
 
       <td>35</td> 
 
       <td>35</td> 
 
       <td>75</td> 
 
       <td>9</td> 
 
       <td>69</td> 
 
       <td>66</td> 
 
       <td>93</td> 
 
       <td>42</td> 
 
       <td>81</td> 
 
       <td>85</td> 
 
       <td>72</td> 
 
       <td>70</td> 
 
       <td>15</td> 
 
       <td>38</td> 
 
      </tr> 
 
      <tr> 
 
       <th>Sample #5</th> 
 
       <td>85</td> 
 
       <td>42</td> 
 
       <td>71</td> 
 
       <td>56</td> 
 
       <td>30</td> 
 
       <td>3</td> 
 
       <td>41</td> 
 
       <td>87</td> 
 
       <td>94</td> 
 
       <td>99</td> 
 
       <td>24</td> 
 
       <td>20</td> 
 
       <td>96</td> 
 
       <td>62</td> 
 
       <td>90</td> 
 
       <td>13</td> 
 
       <td>38</td> 
 
       <td>47</td> 
 
       <td>9</td> 
 
       <td>6</td> 
 
      </tr> 
 
      <tr> 
 
       <th>Sample #6</th> 
 
       <td>18</td> 
 
       <td>80</td> 
 
       <td>85</td> 
 
       <td>65</td> 
 
       <td>9</td> 
 
       <td>93</td> 
 
       <td>93</td> 
 
       <td>61</td> 
 
       <td>49</td> 
 
       <td>10</td> 
 
       <td>45</td> 
 
       <td>3</td> 
 
       <td>93</td> 
 
       <td>61</td> 
 
       <td>4</td> 
 
       <td>80</td> 
 
       <td>2</td> 
 
       <td>60</td> 
 
       <td>53</td> 
 
       <td>81</td> 
 
      </tr> 
 
      <tr> 
 
       <th>Sample #7</th> 
 
       <td>30</td> 
 
       <td>81</td> 
 
       <td>46</td> 
 
       <td>50</td> 
 
       <td>71</td> 
 
       <td>60</td> 
 
       <td>8</td> 
 
       <td>33</td> 
 
       <td>87</td> 
 
       <td>34</td> 
 
       <td>35</td> 
 
       <td>74</td> 
 
       <td>34</td> 
 
       <td>31</td> 
 
       <td>97</td> 
 
       <td>10</td> 
 
       <td>40</td> 
 
       <td>95</td> 
 
       <td>92</td> 
 
       <td>93</td> 
 
      </tr> 
 
      <tr> 
 
       <th>Sample #8</th> 
 
       <td>23</td> 
 
       <td>88</td> 
 
       <td>8</td> 
 
       <td>2</td> 
 
       <td>67</td> 
 
       <td>83</td> 
 
       <td>81</td> 
 
       <td>37</td> 
 
       <td>91</td> 
 
       <td>96</td> 
 
       <td>13</td> 
 
       <td>3</td> 
 
       <td>95</td> 
 
       <td>98</td> 
 
       <td>10</td> 
 
       <td>87</td> 
 
       <td>70</td> 
 
       <td>54</td> 
 
       <td>72</td> 
 
       <td>75</td> 
 
      </tr> 
 
      <tr> 
 
       <th>Sample #9</th> 
 
       <td>14</td> 
 
       <td>21</td> 
 
       <td>20</td> 
 
       <td>21</td> 
 
       <td>9</td> 
 
       <td>68</td> 
 
       <td>60</td> 
 
       <td>73</td> 
 
       <td>22</td> 
 
       <td>29</td> 
 
       <td>9</td> 
 
       <td>48</td> 
 
       <td>44</td> 
 
       <td>66</td> 
 
       <td>58</td> 
 
       <td>15</td> 
 
       <td>8</td> 
 
       <td>24</td> 
 
       <td>19</td> 
 
       <td>65</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script> 
 
<script src="https://cdn.rawgit.com/shivammathur/a703480e7ecaab648c501946f0602922/raw/42e4058257ac5c22069392bdc4f6b2b3aaf26033/stickyheader.js"></script>

來源

2016-08-30 14:16:29

+0

這個作品謝謝！ – Keith

+0

很酷。只要將答案標記爲已接受即可。 –

1

在component.css從CSS的此塊刪除過渡：

.sticky-wrap .sticky-thead, 
.sticky-wrap .sticky-col, 
.sticky-wrap .sticky-intersect { 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    transition: all .125s ease-in-out; 
    z-index: 50; 
    width: auto; /* Prevent table from stretching to full size */ 
}

正如在這裏看到：

.sticky-wrap .sticky-thead, 
.sticky-wrap .sticky-col, 
.sticky-wrap .sticky-intersect { 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 50; 
    width: auto; /* Prevent table from stretching to full size */ 
}

來源

2016-07-27 18:31:49 Miah

+0

考慮了這一點幫助，但如果你看它後面，它仍然將一些滾動時。我需要它根本不移動 – Keith

+0

當你說它「移動一些」時，你能更具體一些。快速上下滾動時，我只會看到一些小問題。這是你所看到的嗎？ – Miah

+0

是的，這就是我的意思，我需要它不動。轉換取出緩和，並且緩解但不固定運動 – Keith

0

我認爲你應該使用這個CSS代碼：

position: fixed; 
    top:0;

到這個吧我已經添加了這段代碼，它在工作，我想。

來源

2016-08-26 09:52:25

+0

這不起作用。即使它是固定的，一旦你滾動，酒吧彈出的股利，所以你看到整個酒吧。它需要留在容器內。 – Keith

+0

嘗試位置：粘請 –

+0

位置：粘不接受 – Keith

De-animate Sticky Header

回答

相關問題