De-animate 置顶 Header

Question

在这个演示 http://tympanus.net/Tutorials/StickyTableHeaders/index3.html 中，有没有办法让带有字段的条形图在顶部并且两侧保持在绝对位置？因此，当用户水平或垂直滚动时，而不是栏以滚动速度向上或向下或向左或向右浮动，它会保持锁定在原位，而后面的 table 正在滚动？

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

Answer 2

我认为你应该使用这个 css 代码：

  position: fixed;
  top:0;

到这个栏我已经添加了这段代码，我认为它正在运行。

Answer 3

正如@Miah 所说，CSS 中的转换属性应该被删除。我强迫它 none.

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

同样在 jquery.stickyheader.js 中，scroll 以 15 毫秒的节流阀调用。

左栏

$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>

De-animate 置顶 Header

De-animate Sticky Header

jquery

css

sticky