将元素固定在Y轴上，但在x轴上滚动页面？

时间：2015-08-07 19:27:26

标签： html css scroll

是否可以将元素固定到页面上的“y”位置，但是当向左和向右滚动时，此元素也会在x轴上滚动？

在我的情况下，我有一个数据表，总共有20列（没有页面滚动显示太多了）。我想将表格标题修复到页面顶部，但是这也修复了x滚动，因此当向左和向右滚动时，标题不会移动。是否可以只修复元素的y定位？

我在这里创建了一个显示标准表的基本小提琴：http://jsfiddle.net/0n9d92er/。基本上，我希望标题1-20固定在顶部（用于垂直滚动），但是当向右滚动时，我应该能够看到从1到20的每个标题（当水平滚动时）。 

.header {
    width: 2000px;
}
.tg  {
    border-collapse:collapse;
    border-spacing:0;
}
.tg td {
    font-family:Arial, sans-serif;
    font-size:14px;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}
.tg th {
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}
.tg .tg-i7wz {
    font-size:20px
}
<table class="tg">
  <tr>
    <th class="tg-i7wz">HEADER 1</th>
    <th class="tg-031e">HEADER 2</th>
    <th class="tg-031e">HEADER 3</th>
    <th class="tg-031e">HEADER 4</th>
    <th class="tg-031e">HEADER 5</th>
    <th class="tg-031e">HEADER 6</th>
    <th class="tg-031e">HEADER 7</th>
    <th class="tg-031e">HEADER 8</th>
    <th class="tg-031e">HEADER 9</th>
    <th class="tg-031e">HEADER 10</th>
    <th class="tg-031e">HEADER 11</th>
    <th class="tg-031e">HEADER 12</th>
    <th class="tg-031e">HEADER 13</th>
    <th class="tg-031e">HEADER 14</th>
    <th class="tg-031e">HEADER 15</th>
    <th class="tg-031e">HEADER 16</th>
    <th class="tg-031e">HEADER 17</th>
    <th class="tg-031e">HEADER 18</th>
    <th class="tg-031e">HEADER 19</th>
    <th class="tg-031e">HEADER 20</th>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT </td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
</table>

感谢您提前提供任何帮助。

1 个答案:

答案 0 :(得分：0)

这是一个不需要jQuery的快速示例，并使用JavaScript在页面滚动时向下浮动标题：

var thead = document.querySelector(".tg tr:first-child");
window.onscroll = function() {
    thead.style["-webkit-transform"] = "translateY(" + window.scrollY + "px)";
    thead.style.transform = "translateY(" + window.scrollY + "px)";
};
.header {
    width: 2000px;
}
.tg  {
    border-collapse:collapse;
    border-spacing:0;
}
.tg td {
    font-family:Arial, sans-serif;
    font-size:14px;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}
.tg th {
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
}
.tg .tg-i7wz {
    font-size:20px;
}

.tg tr:first-child {
    background-color: white;
    outline: solid 1px black;
}
<table class="tg">
  <tr>
    <th class="tg-i7wz">HEADER 1</th>
    <th class="tg-031e">HEADER 2</th>
    <th class="tg-031e">HEADER 3</th>
    <th class="tg-031e">HEADER 4</th>
    <th class="tg-031e">HEADER 5</th>
    <th class="tg-031e">HEADER 6</th>
    <th class="tg-031e">HEADER 7</th>
    <th class="tg-031e">HEADER 8</th>
    <th class="tg-031e">HEADER 9</th>
    <th class="tg-031e">HEADER 10</th>
    <th class="tg-031e">HEADER 11</th>
    <th class="tg-031e">HEADER 12</th>
    <th class="tg-031e">HEADER 13</th>
    <th class="tg-031e">HEADER 14</th>
    <th class="tg-031e">HEADER 15</th>
    <th class="tg-031e">HEADER 16</th>
    <th class="tg-031e">HEADER 17</th>
    <th class="tg-031e">HEADER 18</th>
    <th class="tg-031e">HEADER 19</th>
    <th class="tg-031e">HEADER 20</th>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT </td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
  </tr>
</table>

JSFiddle版本：http://jsfiddle.net/0n9d92er/4/

相关问题
最新问题