Question

在这个演示angular2中，有没有办法让条形图顶部和两侧保持绝对位置？因此，当用户滚动水平或垂直时，而不是以滚动速度向上或向下或向左或向右浮动的条形图，它会在后面的桌子滚动时保持锁定位置？

Answer 1

正如@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));

...

完整代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在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 3

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

  position: fixed;
  top:0;

到这个酒吧我已添加此代码，我认为它正在工作。

消除粘性标题

3 个答案: